Question

我正在尝试使用api中的数据，但是当我尝试呈现数据时，出现此错误：

警告：遇到两个具有相同密钥[object Object]的孩子。密钥应该是唯一的，以便组件在更新过程中保持其身份。非唯一键可能会导致子代重复和/或被忽略-这种行为不受支持，并且可能在将来的版本中更改。

这里是CodeSandbox中的原型……可能很简单，但是我几天前就开始研究这种反应了。你能帮我吗？

Answer 1

更改

<h2 key={movie.toString()}>{movie.title}</h2>

到

<h2 key={movie.id}>{movie.title}</h2>

说明：

React期望列表状组件的每一行都有唯一的键。它使用此键来确定自上次渲染以来所做的更改。否则，列表的更改方式可能会模棱两可。

movie.toString()不是唯一的。每一行的评估结果均为"[object Object]"。

看看您正在调用的API，实际上您可能需要做更多类似的事情：

<h2 key={movie.event.id}>{movie.event.title}</h2>

Answer 2

这是一个 ReactJS 属性，当您在数组上进行映射以创建组件列表时（就像您在 pages / main / index.js 上所做的那样）生成h2），您的密钥应该是唯一的，我认为您正在抓取电影两次（或多次），这会使密钥不唯一（因为您使用电影名称作为密钥），因此请避免问题，尝试改用map循环索引，效果更好。

{this.state.movies.map(( movie , index )  => (
          <h2 key={index}>{movie.title}</h2>
))}

Answer 3

如果要在react中呈现任何列表，则每个组件必须具有唯一的标识符作为键。

在您的页面->主页-> index.js

您有这个

{this.state.movies.map(movie => {
      return <h2 key={movie.toString()}>{movie.title}</h2>;
    })}

这里您需要传递密钥唯一的内容，而不是movie.toString()。

Read about keys here

Answer 4

放入列表

 keyExtractor={(item, index) => String(index)}

或

{{1}}

Answer 5

问题在render函数内部的map函数中渲染React组件时，必须为每个组件提供唯一的关键道具，否则React会在控制台中发出警告，并且在重新渲染组件时可能会或可能不会正确更新组件。最常见的错误之一是使用对象作为键。无论您传入的对象的详细信息如何，对象都会被React字符串化为[object Object]。因此，两个完全不同的对象将具有相同的键。如果发生这种情况，您将在控制台中看到类似以下内容的警告：

警告：使用相同的键[object Object]遇到了两个孩子。密钥应该是唯一的，以便组件在更新中保持其身份。非唯一键可能会导致子代重复和/或被忽略-这种行为不受支持，并且可能在将来的版本中更改。

render() {
return (
    <div>
        {this.state.users.map(user => (
            <UserComponent user={user} key={user} />
        ))}
    </div>
)

}

另一个常见的错误是对键使用数组索引。

render() {
return (
    <div>
        {this.state.users.map((user, idx) => (
            <UserComponent user={user} key={idx} />
        ))}
    </div>
)

}

解决方案关键道具应该独特，稳定且可复制。

Unique：元素的键在同级元素中应该是唯一的。密钥不必是全局唯一的。这是使用对象作为键的问题，因为任何对象的字符串形式始终相同。

稳定：某个元素的键应始终相同。这就是为什么使用数组索引会导致错误的原因。如果用户ABC的索引为0，然后移动到索引1，则即使键所连接的数据已更改，该组件也不会重新渲染，因为键是相同的。

可重现：每次都应该始终可以为该对象获取相同的密钥。通常，这意味着不要对密钥使用随机值。

在这种情况下的最佳实践是使用唯一的ID支持您的对象。在此示例中，将存储在数据库中的用户ID。但是，也可以使用其他哈希函数来获得类似的结果。

render() {
return (
    <div>
        {this.state.users.map((user, idx) => (
            <UserComponent user={user} key={user.id} />
        ))}
    </div>
)

}

https://sentry.io/answers/defining-proper-key-in-props/

如何在React.js上解决“警告：遇到两个具有相同密钥的孩子”

5 个答案: