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

我看了the docs，在我看来这应该是正确的。如果有人能澄清我的错误，我将非常感激。

Answer 1

我建议的是，尝试查看props.user_list.map((user, index)和key会发生什么情况，并index代替user.id。

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

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

Answer 2

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

Answer 3

如果您正在使用PropTypes来验证道具，例如：

Progress.propTypes = {
    labels: PropTypes.array.isRequired,
    tab: PropTypes.func.isRequired,
    key: PropTypes.number.isRequired. <!--- this line will trigger the error--->
}

从PropTypes检查中删除“键”以删除此错误。

Answer 4

也许user.id是重复的，请再次检查

收到错误消息“li：'key'不是道具”

4 个答案: