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

Question

我的ListItem.js看起来像这样：

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

当我分别放置{parseInt（this.props.keyProp）}时，它会显示一个数字。 但是，当我将其等同于<li> key属性时，会收到错误Warning: Each child in a list should have a unique "key" prop. 而且当我检查<li>上的元素时，我也看不到任何键。

我正在共享使用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;
    }

Answer 1

key道具应添加到负责渲染ListItem.js的函数中。 所以：

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

Answer 2

根据反应文档，“键”道具是特殊的字符串属性，用于优化和识别。 它不会出现在HTML中。

您收到的错误是由于每个列表元素都没有唯一键。 应该通过为每个元素分配唯一键来解决此问题。

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

Answer 3

键应该是ListItem本身，不在ListItem内的<li>

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

这解决了问题。