React JS - 在表格行中获取每个对象答案

【问题标题】：React JS - having fetched objects each in a table rowReact JS - 在表格行中获取每个对象
【发布时间】：2021-07-17 15:32:24
【问题描述】：

我正在为我的应用程序使用 React，我正在从位于 http://localhost:8080/api/suppliers/supplier/list 的 API 获取数据

这是我的代码：

 class SupplierData {  
   constructor(props){
    super(props);
    this.state = {
        supplier: [
            {
                id: 0,
                supplierTitle: "Supplier Title",
                supplierFirstName: "First Name",
                supplierLastName: "Last Name"
                
            },
        ],
        errorMessage: [],
    };
}


 ListAllSuppliers = async () =>{
    return await axios.get(`http://localhost:8080/api/suppliers/supplier/list`)
        .then((response) =>{
            let apiResults = response.data;
            this.setState({supplier: apiResults});
            
        }).catch((error) =>{
            this.setState({errorMessage: this.state.errorMessage.push(error)});
        });
  }

 


 render(){
   const TableRow = () => {

        let {id, supplierTitle, supplierFirstName, supplierLastName} = this.state.supplier;
        

        return (
            <tr>
                <td>
                  
                        {this.state.supplier.map((i) => <p>{i.id}</p>)}
                    
                </td>
                <td>
                  <span className="fw-normal">
                     {this.state.supplier.map((i) => <p>{i.supplierTitle}</p>)}
                  </span>
                </td>
                <td>
                  <span className="fw-normal">
                    {this.state.supplier.map((i) => <p>{i.supplierFirstName}</p>)}
                  </span>
                </td>
                <td>
                  <span className="fw-normal">
                   {this.state.supplier.map((i) => <p>{i.supplierLastName}</p>)}
                  </span>
                </td>
          );
        };

         return(
            <table>
              <thead>
                 .....
               </thead>
               <tbody>
                  {this.state.supplier.map((t, id) => <TableRow key={id}> {t} </TableRow>)}   
               </tbody>
             </table>
          );
     }

场景

使用上面的代码，我将获取的数据全部放在一行中。

我希望将数据分布在各行中。 如果我从 API 获取 3 个对象，我希望每个对象都排成一行。 我目前有 3 行，但提取的 3 个对象在 1 行中。

如果我没有任何类似的行：

{this.state.supplier.map((i) => <p>{i.supplierLastName}</p>)}

我根本没有得到显示的数据。

我的问题：

如果我从 API 中获取了 3 个对象，我希望每个对象都排成一行，而不是将它们全部 3 个排成一行？

【问题讨论】：

我在 TableRow 组件中没有看到结束标记
在另一个组件渲染函数中定义一个组件有点奇怪...我建议你在SupplierData之外定义TableRow。这可能有助于了解您的数据发生了什么。目前我不确定你为什么要循环遍历主表中的供应商数据，还要在每个单元格中？

标签： javascript node.js reactjs axios react-hooks

【解决方案1】：

首先，你不应该在另一个组件的渲染函数中创建一个组件，而是在你的组件之外定义它。

其次，由于您的数据是一个对象数组，您可以简单地映射该数组并渲染行元素

render(){
     return(
        <table>
          <thead>
             .....
           </thead>
           <tbody>
              {this.state.supplier.map((t, id) => <TableRow key={id} item={t} />)}   
           </tbody>
         </table>
      );
 }

const TableRow = ({item}) => {

    let {id, supplierTitle, supplierFirstName, supplierLastName} = item;
    return (
        <tr>
            <td>
              
                  <p>{id}</p>
                
            </td>
            <td>
              <span className="fw-normal">
                 <p>{supplierTitle}
              </span>
            </td>
            <td>
              <span className="fw-normal">
                <p>{supplierFirstName}</p>
              </span>
            </td>
            <td>
              <span className="fw-normal">
                 <p>{i.supplierLastName}</p>
              </span>
            </td>
      );
   };

【讨论】：

【解决方案2】：

尝试将循环放在<tbody> 标记内，并从供应商数组中定义必填字段。这样，您将获得一个连续的每个对象，而不是将它们全部 3 个放在一行中。

return(
      <table>
        <thead>
          <tr>
            <th>Supplier Id</th>
            <th>Supplier Title</th>
            <th>Supplier First Name</th>
            <th>Supplier Last Name</th>
            <th>Created At</th>
            <th>Action</th>

          </tr>
        </thead>
        <tbody>
          {this.state.supplier.map(i => {
            return (
              <tr>
                <td>{i.id}</td>
                <td> {i.supplierTitle} </td>
                <td>{i.supplierFirstName}</td>
                <td> {i.supplierLastName} </td>

              </tr>
            )
          })}
        </tbody>
      </table>
)

【讨论】：