获取错误消息“li: 'key' is not a prop" [英] Getting error message "li: 'key' is not a prop"

问题描述

我正在使用 React(版本 15.4.2)，并且正在使用来自我的数据库的查询结果动态填充

.我以为我已经在 <li> 上正确设置了key"属性，但显然我没有 - 当列表呈现时，我收到错误:

I'm working with React (version 15.4.2), and I'm populating a <ul> dynamically with query results from my database. I thought that I had set up the 'key' property on the <li>s correctly, but evidently I have not - when the list renders, I get the error:

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

Warning: li: 'key' is not a prop. Trying to access it will result in 'undefined' being returned. If you need to access the same value within the child component, you should pass it as a different 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>
    );
}

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

I took a look at the docs, and it seems to me like this should be correct. If anyone could clarify my mistake, it would be much appreciated.

推荐答案

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

Somewhere else in the code you're trying to access props.key

基本上，key"props 不会传递给子组件.

Basically, "key" props are not passed to a child component.

React docs 说:特殊道具(ref 和 key)由反应，因此不会转发到组件.".

React docs say: "special props (ref and key) are used by React, and are thus not forwarded to the component.".

这篇关于获取错误消息“li: 'key' is not a prop"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！