Question

我收到3个警告：

警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;支柱。在表中在div（由ModalBody创建）在ModalBody
警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;支柱。在tr 在thead 在表格中
警告：数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;支柱。在tr 在tbody 在表格中

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

在渲染功能中：

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

提前致谢！

Answer 1

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

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

数组或迭代器中的每个子节点都应该有一个唯一的＆＃34;键＆＃34;设置密钥时的支柱

2 个答案: