仅在第一次渲染页面时“数组中的每个子项都应该有一个唯一的 key prop”

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

警告：数组中的每个子元素都应该有一个唯一的“key”属性。使用 检查 renderComponent 调用。

令人遗憾的是我无法追踪到控制台的警告来自哪里......

示例代码：

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>，而不是您定义它的地方：

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