数组或迭代器中的每个 child 都应该有一个唯一的 "key" 属性。反应 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>
  )
}

数组或迭代器中的每个 child 都应该有一个唯一的 "key" 属性。反应 JS 错误

Each child in an array or iterator should have a unique "key" prop. React JS Error

javascript

i18next

reactjs