简体   繁体   English

警告:列表中的每个孩子都应该有一个唯一的“关键”道具。 检查元素时不显示关键道具

[英]Warning: Each child in a list should have a unique “key” prop. Key prop doesn't show when inspect element

My ListItem.js looks like this: 我的ListItem.js看起来像这样:

render() {
        return(
            <li key={parseInt(this.props.keyProp)}>
                <button onClick={this.props.onClick} 
                    className="sidebar__button">
                        {this.props.text}
                </button>
            </li>
        );
    }

When I separately place {parseInt(this.props.keyProp)}, it shows a number. 当我分别放置{parseInt(this.props.keyProp)}时,它会显示一个数字。 But when I equate it to key property of the <li> , I get the error Warning: Each child in a list should have a unique "key" prop. 但是,当我将其等同于<li> key属性时,会收到错误Warning: Each child in a list should have a unique "key" prop. and I also cannot see any key when I inspect element on the <li> . 而且当我检查<li>上的元素时,我也看不到任何键。

I am sharing the code which uses ListItem.js 我正在共享使用ListItem.js的代码

populateLi = () => {
        let LIs = []
        for (var keyItem in graphs) {
            if (graphs.hasOwnProperty(keyItem)) {
                LIs.push(<ListItem keyProp={keyItem} onClick={this.onClick} text={graphs[keyItem][0]["Scheme Name"]}/>)
            }
        }
        return LIs;
    }

The key prop should be added to the function that is responsible for rendering ListItem.js . key道具应添加到负责渲染ListItem.js的函数中。 So: 所以:

items.map((item) => KeyItem key={item.id} item={item} />

As per the react documentation, the "key" prop is a special string attribute that is used for optimization and identification. 根据反应文档,“键”道具是特殊的字符串属性,用于优化和识别。 It does not appear in the HTML. 它不会出现在HTML中。

The error you are getting is due to the fact that each list element does not have a unique key. 您收到的错误是由于每个列表元素都没有唯一键。 This should be fixed by assigning a unique key to each element. 应该通过为每个元素分配唯一键来解决此问题。

More info here: https://reactjs.org/docs/lists-and-keys.html 此处提供更多信息: https : //reactjs.org/docs/lists-and-keys.html

The key is supposed to be ListItem itself not on the <li> inside ListItem 键应该是ListItem本身,不在ListItem内的<li>

LIs.push(<ListItem key={keyItem} onClick={this.onClick} text={graphs[keyItem][0]["Scheme Name"]}/>)

That fixes the problem. 这解决了问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 收到警告“警告:列表中的每个孩子都应该有一个唯一的”key“道具。” 当我的组件渲染时 - Getting warning “Warning: Each child in a list should have a unique ”key“ prop.” when my component render 警告:列表中的每个孩子都应该有一个唯一的“key”道具。 即使已经设置了密钥 - Warning: Each child in a list should have a unique "key" prop. Even after setting the key already 警告:数组或迭代器中的每个子代都应具有唯一的“键”道具。 li中已添加的关键道具 - Warning: Each child in an array or iterator should have a unique “key” prop.; key prop already added in li 警告:列表中的每个孩子都应该有一个唯一的“key”道具。 - ReactJS - Warning: Each child in a list should have a unique "key" prop. - ReactJS 警告:列表中的每个孩子都应该有一个唯一的“关键”道具。 如何解决这个问题? - Warning: Each child in a list should have a unique "key" prop. how to fix this? 正在渲染对象数组的数组,不断得到“警告:列表中的每个孩子都应该有一个唯一的“键”道具。 - Was rendering arrays of arrays of objects, keep getting “Warning: Each child in a list should have a unique ”key“ prop.” 警告:列表中的每个孩子都应该有一个唯一的“关键”道具。 检查 `RenderComments` 的渲染方法 - Warning: Each child in a list should have a unique "key" prop. Check the render method of `RenderComments` 警告:列表中的每个孩子都应该有一个唯一的“关键”道具。 mapStateToProps - Warning: Each child in a list should have a unique "key" prop. mapStateToProps 显示 API 数据时出错。 警告:列表中的每个孩子都应该有一个唯一的“key”道具 - Error when show API data. Warning: Each child in a list should have a unique "key" prop 警告:数组或迭代器中的每个子代均应具有唯一的“键”道具。 检查`单位`的渲染方法 - Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `Units`
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM