"Each child in an array should have a unique key prop" 仅在第一次呈现页面时

Question

我有一个 <tr>，里面有一堆 <td>，其中包括所有通过 Instagram 登录的用户。 <tr> 提供了一个唯一的密钥，当我第一次加载页面时，我被警告每个 child 没有唯一的密钥道具。但是，当我离开该页面或通过 Instagram 删除 account/re-sign 以在 table 中列出帐户时，警告不再出现。为什么会这样？我 99% 确定密钥也是唯一的，因为我在控制台记录了它以检查每个 <tr> 是否有不同的密钥。

警告：数组中的每个 child 都应该有一个唯一的 "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>
        )
})

Answer 1

您需要在渲染 <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>
        )
})

"Each child in an array should have a unique key prop" 仅在第一次呈现页面时

"Each child in an array should have a unique key prop" only on first time render of page

html

jsx

coffeescript

reactjs