反应错误：警告：列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：React Error: Warning: Each child in a list should have a unique "key" prop反应错误：警告：列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-06-16 13:42:27
【问题描述】：

我遇到以下错误：

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `App`. 
See https://reactjs.org/link/warning-keys for more information.
WithStyles@http://localhost:3000/static/js/vendors~main.chunk.js:39295:25
App@http://localhost:3000/static/js/main.chunk.js:197:91

这是我的代码：

function Table({ countries }) {
  return (
    <div className="table">
      {countries.map(({ country, cases }) => {
        <tr>
          <td>{country}</td>
          <td>
            <strong>{cases}</strong>
          </td>
        </tr>
      })}
    </div>
  )
}

【问题讨论】：

一个好的标题应该传达问题而不是你有问题需要帮助，因为这是假设的，因为你在 Stack Overflow 上提问。

标签： reactjs jsx

【解决方案1】：

React 需要以这种方式呈现的键或任何元素。 key 只是一个任意但独特的属性，因此请选择适合的属性，例如：

countries.map(({country, cases}) => {
  <tr key={country}>
     <td>{country}</td>
     <td>
       <strong>{cases}</strong>
     </td>
  </tr>
})

只要国家/地区名称是唯一的就可以了。您可能希望使用类似短格式的 ISO country code 来避免重音和拼写的混乱。

【讨论】：

【解决方案2】：

首先，您不会返回迭代国家/地区的元素。如果你没有为你在循环中渲染的每个元素提供 key，React 会抛出一个警告。反应需要密钥来识别已更改的元素。您可以将索引传递给键作为国家或案例可以相同。

Table({ countries }) {
    return (
        <div className="table">
            {
            countries.map(({country, cases}, index) => {
                    return (
                      <tr key={index}>
                        <td>{country}</td>
                        <td>
                            <strong>{cases}</strong>
                        </td>
                      </tr>
                    )
                )
            }
        </div>
    );
}

【讨论】：

【解决方案3】：

React 要求你需要有一个 key 属性来区分循环中的元素

function Table({ countries }) {
  return (
    <div className="table">
      {countries.map(({ country, cases }) => {
        <tr key={country}>
        <!-- or key={Date.now()}, if your countries are not unique -->
          <td>{country}</td>
          <td>
            <strong>{cases}</strong>
          </td>
        </tr>
      })}
    </div>
  )
}

【讨论】：

【解决方案4】：

警告：

警告：列表中的每个孩子都应该有一个唯一的“key”属性。

告诉你，你没有为你使用.map创建的列表提供唯一键道具。

键可以是任何本地唯一值。阅读更多in the docs

这里有几个例子：

// wrong
<div>
{
  [1,2,3,4,5].map(num => <p>{num}</p>)
}

// Correct. Good.
{
  [1,2,3,4,5].map(num => <p key={num}>{num}</p>)
}

// Correct. Not so good.
{
  [1,2,3,4,5].map((num, index) => <p key={index}>{num}</p>)
}

// Correct. Bad.
{
  [1,2,3,4,5].map((num) => <p key={Math.random()}>{num}</p>)
}

// Wrong
{
  [1,2,3,4,4,4].map((num) => <p key={num}>{num}</p>)
}

// Correct
{
  [1,2,3,4,4,4].map((num, index) => <p key={index}>{num}</p>)
}
</div>

所以，修复你的代码：

{countries.map(({ country, cases }) => {
  return <tr key={SOME_KEY_HERE}> { /* Maybe, key={country} or key={countryID} */ }
    <td>{country}</td>
    <td>
      <strong>{cases}</strong>
    </td>
  </tr>
})}

【讨论】：