數組或迭代器中的每個子都應該有一個唯一的「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> 
) 
}