logo标签列表

React错误：警告：列表中的每个子元素都应该有一个唯一的“key”属性。

reactjsjsx
5
我收到以下错误信息：
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

Here is my code:

function Table({ countries }) {
  return (
    <div className="table">
      {countries.map(({ country, cases }) => {
        <tr>
          <td>{country}</td>
          <td>
            <strong>{cases}</strong>
          </td>
        </tr>
      })}
    </div>
  )
}
3
一个好的标题应该传达问题本身，而不是表明你有问题并需要帮助，因为既然你在 Stack Overflow 上提问，这一点已经被假定了。 - undefined
5个回答
4

在这种情况下，React需要使用键或以这种方式渲染的任何元素。 key 只是一个任意的但唯一的属性，因此选择符合条件的内容，例如：

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

只要国家名称唯一，就没有问题。您可能希望使用类似于短格式的ISO国家代码，以避免与重音和拼写相关的混乱。
2
首先，您未返回遍历国家的元素。如果您在循环中渲染的每个元素未提供键，则React会抛出警告。键是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>
    );
}

为了澄清一下，只要你的行不会移动，你可以使用索引。它会缓存一些工作以加快重复渲染的速度，这种情况经常发生。本次渲染中的第47行将被视为上一次渲染的第47行。如果你插入或删除了第31行，React下次将能够察觉到，并重新计算所有项目从第31项到末尾的巨大表格中的每个按键输入。是相当慢的。另一方面，如果你使用国家名称作为键，那么你可以完全重新排列你的所有行（按名称排序，按人口排序），而React的缓存机制将正常工作。 - undefined
1

警告：

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

这意味着您在使用 .map 创建列表时没有提供一个唯一的键值属性。

键值可以是任何本地唯一的值。在文档中了解更多信息。

以下是几个示例：

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接