Jedes Kind in einem Array oder Iterator sollte eine eindeutige "Schlüssel" -Stütze haben. React JS Error

Question

Ich habe die anderen verfügbaren Antworten gelesen, kann aber keinen Sinn daraus machen. Ich bin wirklich nicht sicher, wo Sie den Schlüssel in dieser Situation einfügen können

jede Hilfe wäre willkommen!

Answer 1

Sie müssen einen Schlüssel zu der ursprünglichen Array-Map hinzufügen auch sehen, wo ich UNIQUE_KEY_NEEDED_HERE_ALSO hinzugefügt habe.

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