在数据表组件中显示来自 DB 的数据答案

【问题标题】：Display data from DB in Data table component在数据表组件中显示来自 DB 的数据
【发布时间】：2021-06-28 14:36:15
【问题描述】：

我拿了一个数据表组件。在其中我想要每个对象一行。

return (
           

         <Table striped bordered hover variant="dark">
  <thead>
    <tr>
  
      <th>Nom</th>
      <th>Adresse</th>
 
   
    </tr>
  </thead>
  <tbody>
    <tr>
    
      
      <td>{this.props.obj.nom}</td>
        <td>{this.props.obj.adresse}</td>
   
    
      
    </tr>
 
  </tbody>
</Table> 

        );

我的 obj 设置了这两个功能：

  getEntreprise = () => {
   axios.get('http://localhost:8080/api/ent')
            .then(res => {
                this.setState({ liste: res.data });
                console.log(res.data);
                console.log('Data récupérée1 !');
            })
            .catch(function (error) {
                console.log(error);
            })
  }

  dataTable() {
        return this.state.liste.map((data,i) => {
            return <DataTable obj={data}  key={i}/>;
        });
    }

我不明白为什么它会为每个项目生成一个组件，而不是每个项目生成一个表格行

【问题讨论】：

标签： reactjs mapping

【解决方案1】：

在这里，您为数组列表中的每个映射项映射一个新表。因此，您只需在单个表标签内映射表行标签。

   getEntreprise = () => {
   axios.get('http://localhost:8080/api/ent')
            .then(res => {
                this.setState({ liste: res.data });
                console.log(res.data);
                console.log('Data récupérée1 !');
            })
            .catch(function (error) {
                console.log(error);
            })
  }

  dataTable() {
        return (
  <Table striped bordered hover variant="dark">
  <thead>
    <tr>
  
      <th>Nom</th>
      <th>Adresse</th>
 
   
    </tr>
  </thead>
  <tbody>
{
this.state.liste.map((data,i) => (
            <DataTable obj={data}  key={i}/>;
        ));
}
    
  </tbody>
</Table> 
)}

并改变DataTable组件如下

return (
    <tr>
      <td>{this.props.obj.nom}</td>
        <td>{this.props.obj.adresse}</td>
    </tr>
 
        );

【讨论】：