Question

我不断收到警告：“警告：列表中的每个孩子在ShowcaseLayout中都应该有一个唯一的“键”道具

我尝试遍历代码的每个区域，在这些区域中我使用map函数并提供唯一的键（某些键是uuid），但我似乎无法使错误消息消失< / p>

generateDOM() {

    return _.map(this.state.layouts[this.state.currentBreakpoint], l => {

      if (this.state.feedList[l.i] !== undefined && this.state.feedList.length > 0){
      return (

        <div key={l.i} className={l.static ? "static" : ""}>

            <div className="jsmpeg" data-url={this.state.feedList[l.i].streamURL} uuid={this.state.feedList[l.i].uuid} >
        </div>    
        );
       } 
    });
  }

    ReactDOM.createPortal( (
      <Form.Group controlId="enableVal" >
          <Form.Control name="enablecamera" className="enableOptionsBox"  as="select" multiple>
        { this.state.options.map((item) => <option key={item.key} name={item.name} value={item.value} uuid={item.uuid}>{item.name}</option>) }



        </Form.Control>
    <Button variant="Success" className="btn btn-success" onClick={ () => {
          sendEnable();
    }} >
      Enable
    </Button>

    </Form.Group>
    ), document.getElementById('enableForm')) ];
  }

Answer 1

您仍然有可能将重复的ID / UUID映射到迭代的元素。

为确保它是唯一值，您可以返回地图的索引，并将其提供给元素，如下所示：

generateDOM() {
  return _.map(this.state.layouts[this.state.currentBreakpoint], (l, index) => {
    if (this.state.feedList[l.i] !== undefined && this.state.feedList.length > 0){
      return (
        <div key={index} className={l.static ? "static" : ""}>
            <div className="jsmpeg" data-url={this.state.feedList[l.i].streamURL} uuid={this.state.feedList[l.i].uuid} >
        </div>    
      );
     } 
  });
}

Answer 2

添加idx作为密钥的一部分，而不是分配item.key .map（（item）=>

以下希望对您有所帮助， .map（（item，idx）=>

快乐编码！

Answer 3

您应该记录所有列表项并检查是否有重复的键。您不应该将索引用作键，因为如果重新排序列表，可能会导致错误。这段代码没有什么问题，但可能是feedList id。

尝试找出有关唯一键的警告来自何处

3 个答案: