数组或迭代器中的每个子都应该有一个唯一的“key”属性。 React JS错误

Question

我已经阅读了其他可用的答案，但无法理解它。我真的不知道在这种情况下在哪里插入密钥

const recursivelyMapChildren = (node, index) => { 
return (
    node.children.map((child, i) => { 
     if (child.text) return child.text 
     const tag = child.tag 
     return React.createElement(
     tag, 
     { 
      key: `${tag}-${index}-${i}`, 
      className: `text-block-${tag}`, 
      ...child.attributes, 
     }, 
     recursivelyMapChildren(child, index + 1) 
    ) 
    }) 
) 
} 

const STTextBlock = ({ data }) => { 
const textTag = data.content[0].tag 
    return (
    <div className="text-block"> 
     { 
     data.content.map(textBlock => 
      React.createElement(
      textTag, 
      { 
       className: `${textTag}`, 
      }, 
      recursivelyMapChildren(textBlock) 
     ) 
     ) 
     } 
     <style jsx>{styles}</style> 
    </div> 
) 
} 

任何帮助，将不胜感激！

Answer 1

你需要添加一个键到初始数组映射也看看我在哪里添加了UNIQUE_KEY_NEEDED_HERE_ALSO。

const recursivelyMapChildren = (node, index) => { 
return (
    node.children.map((child, i) => { 
     if (child.text) return child.text 
     const tag = child.tag 
     return React.createElement(
     tag, 
     { 
      key: `${tag}-${index}-${i}`, 
      className: `text-block-${tag}`, 
      ...child.attributes, 
     }, 
     recursivelyMapChildren(child, index + 1) 
    ) 
    }) 
) 
} 

const STTextBlock = ({ data }) => { 
const textTag = data.content[0].tag 
    return (
    <div className="text-block"> 
     { 
     data.content.map(textBlock => 
      React.createElement(
      textTag, 
      { 
       key: `UNIQUE_KEY_NEEDED_HERE_ALSO` 
       className: `${textTag}`, 
      }, 
      recursivelyMapChildren(textBlock) 
     ) 
     ) 
     } 
     <style jsx>{styles}</style> 
    </div> 
) 
}