配列またはイテレータ内の各子には、一意の「キー」小文字が必要です。 React JS Error

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> 
) 
}