小编典典

“数组中的每个孩子都应该具有唯一的键道具”,仅在首次呈现页面时

reactjs

我有<tr>一堆<td>里面包含了所有通过Instagram登录的用户。将<tr>提供一个独特的密钥,当我第一次加载页面,我警告每个孩子不具有唯一关键道具。但是,当我离开该页面或删除帐户/通过Instagram重新登录以在表中列出该帐户时,警告不再出现。为什么会这样?我99%确信该键也是唯一的,因为我通过控制台对其进行了记录,以检查每个<tr>键是否具有不同的键。

警告:数组中的每个孩子都应该有一个唯一的“键”道具。使用来检查renderComponent调用。

真是令人um目结舌,我无法从控制台找到警告的来源…

样例代码:

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

阅读 220

收藏
2020-07-22

共1个答案

小编典典

您需要在要渲染的位置添加key属性<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>
        )
})
2020-07-22