我有<tr>一堆<td>里面包含了所有通过Instagram登录的用户。将<tr>提供一个独特的密钥,当我第一次加载页面,我警告每个孩子不具有唯一关键道具。但是,当我离开该页面或删除帐户/通过Instagram重新登录以在表中列出该帐户时,警告不再出现。为什么会这样?我99%确信该键也是唯一的,因为我通过控制台对其进行了记录,以检查每个<tr>键是否具有不同的键。
<tr>
<td>
警告:数组中的每个孩子都应该有一个唯一的“键”道具。使用来检查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> ) })
您需要在要渲染的位置添加key属性<component2>,而不是在定义它的位置添加:
<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> ) })