设置key时，数组或迭代器中的每个子级都应该有一个唯一的“key”属性

Question

我收到3条警告：

1. 警告：数组或迭代器中的每个子节点都应该在ModalBody的div（由ModalBody创建）中的表中具有唯一的key prop。
2. 警告：数组或迭代器中的每个孩子都应该有一个唯一的"key"prop. in tr in thead in table
3. 警告：数组或迭代器中的每个子节点都应该有一个唯一的"key"prop. in tr in tbody in table

我有一个函数，它将数据设置为可观察变量。我在使用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>

从服务中获得promise并将主体内容设置为可观察变量的函数：

    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;
        });
    });
}

提前谢谢！

Answer 1

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

 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>);
}

Answer 2

尝试将唯一迭代器索引添加为键：