Предупреждение / Ошибка: «Найдено x элементов с неуникальным идентификатором» REACTJS API REST

Question

Я хочу сделать форму со значениями, соответствующими каждой книге (с идентификатором, который связан с), но консоль напишет это предупреждение "Найдено х (количество книг) элементов с неуникальным идентификатором". Итак, везде написана информация об одной и той же книге, потому что идентификатор не опознан. Что я могу изменить / добавить в мой код, пожалуйста? Вот мое возвращение:

return (
    <div>
      <MDBTable hover>
        <MDBTableHead>
          <tr>
            <th>Titre</th>
            <th>Auteur</th>
            <th>Année de sortie</th>
            <th>Edition</th>
            <th>Type</th>
            <th>Statut</th>
            <th>Date d'achat</th>
            <th></th>
          </tr>
        </MDBTableHead>
        <MDBTableBody>
          {
            this.state.books.map(livre => (
              <tr key={livre.id} onChange={this.Change} >
                <td>{livre.title} </td>
                <td>{livre.author}</td>
                <td>{livre.year}</td>
                <td>{livre.edition}</td>
                <td>{livre.typeBook}</td>
                <td>{livre.status}</td>
                <td>{livre.date}</td>
                <td><MDBBtn color="dark" onClick={this.toggle(8)}>Edit</MDBBtn>
                      <MDBModal isOpen={this.state.modal8} toggle={this.toggle(8)} fullHeight position="top">
                        <MDBModalHeader toggle={this.toggle(8)}>{livre.title}</MDBModalHeader>
                        <MDBModalBody>
                        <div className="grey-text">
                    <label htmlFor="title" className="grey-text">
                      Titre
                    </label>
                    <input
                      type="text"
                      id="title"
                      placeholder={livre.title}
                      className="form-control"
                      onChange={this.change}
                    />

                    <br />

                    <label htmlFor="author" className="grey-text">
                      Auteur
                    </label>
                    <input
                      type="text"
                      id="author"
                      placeholder={livre.author}
                      className="form-control"
                      onChange={this.change}
                    />

                    <br />

                    <label htmlFor="year" className="grey-text">
                      Année de sortie
                    </label>
                    <input
                      type="number"
                      id="year"
                      className={"form-control"}
                      placeholder={livre.year}
                      onChange={this.change}
                    />

                    <br />

                    <label htmlFor="date" className="grey-text">
                      Date d&apos;achat
                    </label>
                    <input
                      type="date"
                      id="date"
                      placeholder={livre.date}
                      className="form-control"
                      onChange={this.change}
                    />

                    <br />

                    <label htmlFor="edition" className="grey-text">
                      Edition
                    </label>
                    <input
                      type="text"
                      id="edition"
                      placeholder={livre.edition}
                      className="form-control"
                      onChange={this.change}
                    />

                    <br />

                    <label htmlFor="typeBook" className="grey-text">
                      Type
                    </label>
                    <input
                      type="text"
                      id="typeBook"
                      placeholder={livre.typeBook}
                      className="form-control"
                      onChange={this.change}
                    />

                    <br />

                    <label htmlFor="status" className="grey-text">
                      Statut
                    </label>
                    <input
                      type="text"
                      id="status"
                      placeholder={livre.status}
                      className="form-control"
                      onChange={this.change}
                    />


                  </div>
                        </MDBModalBody>
                        <MDBModalFooter>
                          <MDBBtn color="danger" onClick={this.toggle(8)}>Annuler</MDBBtn>
                          <MDBBtn color="dark">Enregistrer</MDBBtn>
                        </MDBModalFooter>
                      </MDBModal>               
                </td>

              </tr>
            ))
          }
        </MDBTableBody>
      </MDBTable>

    </div>
  );
}

Answer 1

В вашем map вы создаете элементы с id s на них. Вы должны как-то сделать эти id уникальными. Когда элементу присваивается id, id должен быть уникальным, иначе у вас будут проблемы с API-интерфейсами, которые на них полагаются.

Откройте поиск, введите id=", и вы сможете чтобы увидеть их. Поскольку они находятся в map, для каждого элемента массива вы генерируете элемент с одинаковым идентификатором.

Вероятно, это так же просто, как добавить индекс к идентификатору или просто опустить его, если только вы иметь спецификацию c для него.