javascript - 警告/错误：“找到具有非唯一 id 的 x 元素”REACTJS API REST

Question

我想用每本书对应的值（与关联的id）做一个表格，但是控制台写这个警告“找到x（书数）元素具有非唯一id”。所以，它到处都写了同一本书的信息，因为id不被识别。请问我可以在我的代码中更改/添加什么？这是我的回报：

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

标签： javascriptreactjsformsapiinput

Answer 1

在您的中，您正在创建带有s 的map元素。id您应该以id某种方式使它们变得独一无二。无论何时给定一个元素id，它都id必须是唯一的，否则您将遇到依赖于它们的 API 的问题。

打开查找，输入，id="您应该能够看到它们。由于它们在 amap中，因此对于数组的每个元素，您将生成一个具有相同 id 的元素。

除非您有特定用途，否则它可能就像将索引附加到 id 或忽略它一样简单。