0

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

我已经尝试遍历我使用 map 函数的代码的每个区域并提供一个唯一的键(一些键是 uuid)但我似乎无法让错误消息消失

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')) ];
  }
4

3 回答 3

0

而不是分配 item.key 添加 idx 作为 key .map((item) => 的一部分

希望下面有帮助,.map((item, idx) =>

快乐编码!

于 2019-07-23T17:39:53.010 回答
0

您仍有可能将重复的 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>    
      );
     } 
  });
}
于 2019-07-23T17:24:28.867 回答
0

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

于 2019-07-24T15:02:44.630 回答