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

我试图使用api中的数据，但当我试图呈现数据时，我得到以下错误：

警告：遇到具有相同键的两个子项[object]。键应该是唯一的，以便组件在更新期间保持其标识。非唯一键可能会导致复制和/或忽略子项-不支持该行为，并且可能在将来的版本中更改

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

这是一个原型在。。。也许这是一件很容易解决的事情，但我几天前开始研究react。你能帮我吗？

这是一个ReactJS属性，当你映射到一个数组来创建一个组件列表时，就像你在页面/main/index.js上生成h2一样，你的密钥应该是唯一的，我认为你在那里获取一部电影2次或更多次，这使得密钥不是唯一的，因为你使用电影名称作为密钥，因此，为了避免这个问题，尝试使用map循环索引，这样更好

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

这是一个ReactJS属性，当你映射到一个数组来创建一个组件列表时，就像你在pages/main/index.js上生成h2一样，你的密钥应该是唯一的，我认为你在那里获取一部电影2次或更多次，这使得密钥不是唯一的，因为你使用电影名称作为密钥，所以为了避免问题，尝试使用映射循环索引，这样更好

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

改变

改变

---

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

在您的页面->主页->索引.js

你有这个

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

在这里，您需要将一些独特的内容传递给key，而不是movie.toString

---

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

在您的页面->主页->索引.js

你有这个

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

在这里，您需要将一些独特的内容传递给key，而不是movie.toString

列入定额清单

listKey={(item, index) => 'index' + index.toString()}

或

列入定额清单

listKey={(item, index) => 'index' + index.toString()}

或

问题 在渲染函数内部的映射函数中渲染React组件时，必须为每个组件提供唯一的键道具，否则React将在控制台中发出警告，并且在重新渲染组件时可能会或可能不会正确更新组件。最常见的错误之一是使用对象作为键。无论您传入的对象的具体情况如何，对象都会通过React进入[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>
)

}

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

唯一：元素的键在其同级中应该是唯一的。密钥不需要全局唯一。这就是将对象用作键的问题，因为任何对象的字符串形式总是相同的

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

可复制：每次都可以为对象获得相同的键。通常这意味着不要对关键点使用随机值

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

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

}

问题 在渲染函数内部的映射函数中渲染React组件时，必须为每个组件提供唯一的键道具，否则React将在控制台中发出警告，并且在重新渲染组件时可能会或可能不会正确更新组件。最常见的错误之一是使用对象作为键。无论您传入的对象的具体情况如何，对象都会通过React进入[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>
)

}

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

唯一：元素的键在其同级中应该是唯一的。密钥不需要全局唯一。这就是将对象用作键的问题，因为任何对象的字符串形式总是相同的

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

可复制：每次都可以为对象获得相同的键。通常这意味着不要对关键点使用随机值

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

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

}

---

我希望看到您的代码，特别是将key属性添加到看起来像div元素的部分。正如警告消息所暗示的，React将只允许唯一值作为键，因此如果您尝试在多个子元素上存储相同的键值，您将收到此消息。请阅读并相应地更新您的问题。您应该有一个最小的复制案例，在代码中，我们可以复制粘贴，在您的问题中。目前，您的问题可能已经结束了。我希望看到您的代码，特别是将key属性添加到类似div元素的部分。正如警告消息所暗示的，React将只允许唯一值作为键，因此如果您尝试在多个子元素上存储相同的键值，您将收到此消息。请阅读并相应地更新您的问题。您应该有一个最小的复制案例，在代码中，我们可以复制粘贴，在您的问题中。现在看来，你的问题可能已经结束了。哈哈，在修复了几个bug之后，我陷入了已经很累的状态，没有意识到最简单的问题。哈哈。谢谢你的帮助！哈哈，在修复了几个bug之后，我陷入了已经很累的状态，没有意识到最简单的哈哈。谢谢你的帮助！谢谢你的帮助！谢谢你的帮助！谢谢你的帮助！谢谢你的帮助！你能为你的回答添加一些解释吗？跟随此链接加入我的WhatApp组React native developer你能为你的回答添加一些解释吗？跟随此链接加入我的WhatApp组React native developer