“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时

问题描述

我有一个 <tr> 里面有一堆 <td> 由所有通过 Instagram 登录的用户组成.<tr> 提供了一个唯一键，当我第一次加载页面时，我被警告每个孩子没有唯一的键道具.但是，当我离开该页面或当我通过 Instagram 删除帐户/重新登录以在表格中列出该帐户时，警告不再出现.为什么会这样?我 99% 确定该密钥也是唯一的，因为我通过控制台记录它以检查每个 <tr> 是否具有不同的密钥.

I have a <tr> with a bunch of <td> inside that consists of all users logged in through Instagram. The <tr> is provided a unique key and when I first load the page, I am warned of each child not having a unique key prop. However, when I navigate away from that page OR when I delete the account/re-sign in through Instagram to list the account in the table, the warning doesn't come up anymore. Why does this happen? I'm 99% certain that the key is also unique because I console logged it to check that each <tr> has a different key.

警告:数组中的每个孩子都应该有一个唯一的key"道具.使用 . 检查 renderComponent 调用.

Warning: Each child in an array should have a unique "key" prop. Check the renderComponent call using .

很遗憾，我无法从控制台追踪到警告的来源......

It's a bummer that I can't trace to where the warning is coming from from the console...

示例代码:

component1 = React.createClass({
    render: () ->
        # A lot of table stuff here
        _.chain(@state.users).map((x) -> <component2 profile={x} />),@).value()
)}

component2 = React.createClass({
    render: () ->
        return (
            <tr key={@props.profile.id}
                <td>Blah</td>
                <td>Blah</td>
                <td>Blah</td>
            </tr>
        )
})

推荐答案

你需要在渲染 <component2> 的地方添加 key 属性，而不是你定义它的地方:

You need to add the key property where you are rendering <component2>, not where you are defining it:

component1 = React.createClass({
    render: () ->
        # A lot of table stuff here
        _.chain(@state.users).map((x) -> <component2 profile={x} key={x.id} />),@).value()
)}

component2 = React.createClass({
    render: () ->
        return (
            <tr>
                <td>Blah</td>
                <td>Blah</td>
                <td>Blah</td>
            </tr>
        )
})

这篇关于“数组中的每个孩子都应该有一个唯一的 key prop"仅在第一次呈现页面时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！