Каждый ключ в массиве или итераторе должен иметь уникальную «ключевую» опору, когда ключ установлен

Question

Я получаю 3 предупреждения:

1. Предупреждение: у каждого дочернего элемента в массиве или итераторе должен быть уникальный «ключ».в таблице в div (созданной ModalBody) в ModalBody
2. Предупреждение: у каждого дочернего элемента в массиве или итераторе должен быть уникальный «ключ».в tr в thead в таблице
3. Предупреждение: у каждого дочернего элемента в массиве или итераторе должна быть уникальная «ключевая» опора.в 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

Я исправил свои предупреждения с разделением логики рендеринга.

 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

попробуйте добавить уникальный индекс итератора в качестве ключа: <tr key={idx}>