收到错误消息“li: 'key' is not a prop”

IT技术 reactjs
2021-05-07 15:09:59

我正在使用 React（版本 15.4.2），并且正在<ul>使用我的数据库中的查询结果动态填充一个。我以为我已经在<li>s 上正确设置了 'key' 属性，但显然我没有 - 当列表呈现时，我收到错误：

警告：li: 'key' 不是props。尝试访问它会导致返回“未定义”。如果您需要访问子组件中的相同值，则应将其作为不同的 prop 传递。

这是我的列表的代码：

function UserList(props) {
    return(
        <ul className="UserList">
            {
                props.user_list.map((user) => (
                    <li className="UserListItem" key={user.id}>
                        <Link to={`/users/${user.id}`}>{user.first_name} {user.last_name}</Link>
                    </li>
                ))
            }
        </ul>
    );
}

我看了看文档，在我看来这应该是正确的。如果有人能澄清我的错误，将不胜感激。

4个回答

您试图访问 props.key 的代码中的其他地方

基本上，“关键”props不会传递给子组件。

React文档说：“React 使用了特殊的 props（ref 和 key），因此不会转发到组件。”。

我的建议是，试着看看如果你这样做会发生什么props.user_list.map((user, index)，为了key，给它index而不是user.id。

如果此过程使警告消失，您可以合理地确定您有重复id的user. 在这种情况下，我建议您将注意力转向生成用户列表的后端。是如何id创建的？可能值得一看uuid以确保您唯一标识您的用户。

如果此测试仍然存在错误，我建议尝试升级 react 版本，但我非常怀疑是否会出现这种情况。

您可以将 li 包装在 React 片段中，例如

{props.user_list.map((user, index) => (
         <React.Fragment key={index}>
           <li className="UserListItem" >
             <Link to={`/users/${user.id}`}>{user.first_name} {user.last_name}</Link>
           </li>
         </React.Fragment>
    ))
}

可能 user.id 重复了，请再次检查

其它你可能感兴趣的问题
上一篇Makerbot Replicator 2 在预热 hbp 后重新启动 下一篇在 React 中获取关键props警告，即使设置了关键