“数组中的每个子代应该具有唯一的键”只有第一次渲染的页面 [英] "Each child in an array should have a unique key prop" only on first time render of page

问题描述

我有一个< 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.

警告：数组中的每个子级都应该有唯一的keyprop。检查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> 的键属性，而不是您要定义的位置：

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

这篇关于“数组中的每个子代应该具有唯一的键”只有第一次渲染的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！