警告：数组或迭代器中的每个子代都应具有唯一的“键”道具

Question

我是新开发人员ReactJS ，我使用前端的ReactJS，后端的NodeJS和关于数据库的MySQL来开发表。 我想通过表上的“选择”请求获取数据。

我的前端：

class ListeClients extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clients: []
    };
  }

  componentDidMount() {
    axios({
      method: "get",
      url: "/app/listeclients/",
      withCredentials: true,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
        Accept: "application/json"
      }
    })
      .then(response => {
        if (response && response.data) {
          this.setState({ clients: response.data });
        }
      })
      .catch(error => console.log(error));
  }

  render() {
    let { clients } = this.state;
    return (
      <div className="animated fadeIn">
        <Row>
          <Col>
            <Card>
              <CardHeader>
                <h4>
                  <strong>
                    <i className="fa fa-align-justify" /> Tous les clients
                  </strong>
                </h4>
              </CardHeader>
              <CardBody>
                <div className="container">
                  <div className="panel panel-default p50 uth-panel">
                    <table className="table table-hover">
                      <thead>
                        <tr>
                          <th>Code</th>
                          <th>Prenom</th>
                          <th>Nom</th>
                          <th>Email</th>
                          <th>Telephone</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        {clients &&
                          clients.length &&
                          clients.map(client => (
                            <tr key={client.clientid}>
                              <td>{client.Code} </td>
                              <td>{client.Prenom}</td>
                              <td>{client.Nom}</td>
                              <td>{client.Email}</td>
                              <td>{client.Telephone}</td>
                              <td>
                                <a>Edit</a>|<a>Delete</a>
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}

export default ListeClients;

我的路由器是：

    exports.listeclients = function(req, res) {
         var clientid = req.body.clientid;
        var Code = req.body.Code;
        var Prenom = req.body.Prenom;
        var Nom = req.body.Nom;
        var Email = req.body.Email;
        var Telephone = req.body.Telephone;


        connection.query('SELECT Code, Prenom, Nom, Email, Telephone FROM clients ', function(error, results, fields) {
            if (error) throw error;
res.send(JSON.stringify(results));
            console.log(results);
        });
    }

您能解释一下为什么我无法查看表格的内容吗？

当我运行它时，我得到：

错误 ：

 Warning: Each child in an array or iterator should have a unique "key" prop.

    in tr (at ListeClients.js:65)
    in ListeClients (created by LoadableComponent)
    in LoadableComponent (at DefaultLayout.js:46)
    in Route (at DefaultLayout.js:45)
    in Switch (at DefaultLayout.js:43)
    in div (created by Container)
    in Container (at DefaultLayout.js:42)
    in main (at DefaultLayout.js:40)
    in div (at DefaultLayout.js:32)
    in div (at DefaultLayout.js:28)
    in DefaultLayout (created by Route)
    in Route (at App.js:32)
    in Switch (at App.js:27)
    in Router (created by HashRouter)
    in HashRouter (at App.js:26)
    in App (at index.js:9)

请问如何解决？

Answer 1

如tholle所说，在“

key={client.clientid}

或安装UUID

npm install uuid

更多信息为什么在这里