设置键时，数组或迭代器中的每个子项都应具有唯一的“键”道具答案

【问题标题】：Each child in an array or iterator should have a unique "key" prop when key is set设置键时，数组或迭代器中的每个子项都应具有唯一的“键”道具
【发布时间】：2018-10-31 05:02:37
【问题描述】：

我收到 3 个警告：

警告：数组或迭代器中的每个子项都应具有唯一的“键”道具。在表中在 div 中（由 ModalBody 创建）在模态体中
警告：数组或迭代器中的每个子项都应具有唯一的“键”道具。在 tr 在前面在表中
警告：数组或迭代器中的每个子项都应具有唯一的“键”道具。在 tr 在体内在表中

我有将数据设置为可观察变量的函数。我在使用 map 时在外部元素上设置了键，但我仍然一次又一次地收到这个警告。

在渲染函数中：

 <a 
   href="javascript:;" 
   onClick={() => this.getFieldHistory(field.name, 123, "123-123123-12")}
 >
    History
 </a>

 <Modal backdrop='static' autoFocus={true} show={this.showModal} onHide={this.closeModal}>
   <Modal.Header closeButton></Modal.Header>
   <Modal.Body>
     {this.modalBody}
   </Modal.Body>
 </Modal>

从服务中获得承诺并将 tbody 内容设置为可观察变量的函数：

    getFieldHistory(fieldName: string, subDeedId: number, guid: string): any {

    this.reportsDataService.getFieldHistory(fieldName, subDeedId, guid).then(fieldHistory => {

      runInAction.bind(this)(() => {
        this.modalBody = (
          <table className="table table-striped">
            <thead>
              <tr>
                <th></th>
                <th>{this.getResource(fieldName)}</th>
              </tr>
            </thead>
            <tbody>
            {
              fieldHistory.map((history, idx) => {
                return (
                  <tr key={history.date.unix().toString()}>
                    <td>{history.date.format()}</td>
                    <td>{history.fieldName}  </td>
                  </tr>
                );
                })
            }
            </tbody>
          </table>)

          this.showModal = true;
        });
    });
}

提前致谢！

【问题讨论】：

尝试将键值添加到<table className="table table-striped" key="someuniqueid">
试过了，还是不行
如果<tr key={idx}> 不起作用，则您的错误来自其他地方。
同意Ted，能否提供codepen或codesandbox链接？
我找到了解决方法，但仍然不知道问题出在哪里。也许我必须在组件代码上使用更多分离。谢谢！

标签： reactjs key

【解决方案1】：

尝试添加唯一迭代器索引作为键：<tr key={idx}>

【讨论】：

我已经尝试使用 map 函数中的索引和唯一的更改日期时间戳

【解决方案2】：

我通过分离渲染逻辑修复了警告。

 getFieldHistory(fieldName: string, subDeedId: number, guid: string): any {

    this.reportsDataService.getFieldHistory(fieldName, subDeedId, guid).then(fieldHistory => {

        runInAction.bind(this)(() => {
            this.modalBody = (<FieldHistoryResultUI data={fieldHistory} title={this.getResource(fieldHistory[0].fieldName)} />);

            this.showModal = true;
        });
    });
}

const FieldHistoryResultUI = (props: any) => {
    return (
    <table className="table table-striped">
        <thead>
            <tr>
                <th></th>
                <th>{props.title}</th>
            </tr>
        </thead>
        <tbody>
            {props.data.map((history: any, idx: number) => {
                return (<FieldHistoryRow key={idx} data={history} />);
            })}
        </tbody>
    </table>);
}

const FieldHistoryRow = (props: any) => {
      return (<tr><td>{props.data.date.format()}</td><td>{props.data.fieldName}</td></tr>);
}

【讨论】：