收到错误消息"li:'key'不是道具"

Question

我正在使用React(版本15.4.2),我正在<ul>用我的数据库中的查询结果动态填充.我以为我已经在<li>s上正确设置了'key'属性,但显然我没有 - 当列表呈现时,我得到错误:

警告:li:'key'不是道具.尝试访问它将导致返回"未定义".如果需要在子组件中访问相同的值,则应将其作为不同的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>
    );
}

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

Answer 1

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

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

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

Answer 2

你可以将 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>
    ))
}

Answer 3

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

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

如果此测试仍然存在错误，我建议尝试升级反应版本，但我非常怀疑情况会如此。