React JS - 自动添加行答案

【问题标题】：React JS - adding rows automaticallyReact JS - 自动添加行
【发布时间】：2021-04-22 20:04:36
【问题描述】：

我正在为我的应用程序使用 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>
                    <Card.Link as={Link} to={Routes.Suppliers.path} className="fw-normal">
                        {id}
                    </Card.Link>
                </td>
                <td>
                  <span className="fw-normal">
                    {accountNumber}
                  </span>
                </td>
                <td>
                  <span className="fw-normal">
                    {supplierTitle}
                  </span>
                </td>
                <td>
                  <span className="fw-normal">
                    {supplierFirstName}
                  </span>
                </td>
                <td>
                  <span className="fw-normal">
                    {supplierLastName}
                  </span>
                </td>
          );
        };

         return(
            <table>
              <thead>
                 .....
               </thead>
               <tbody>
                  {this.state.supplier.map((t, id) => <TableRow key={id}> {t} </TableRow>)}     <--- Here is where my question is: I want to show the data fetched from the API
               </tbody>
             </table>
          );
     }

我的问题：

我想显示从api获取的数据，每个对象一行，我有3个对象，我有3行，但是数据没有显示。

有什么办法可以解决这个问题？

【问题讨论】：

标签： javascript node.js reactjs axios

【解决方案1】：

因为 this.state.supplier 是数组而不是对象，所以你不能解构它。

`render(){ const TableRow = ({id, supplierTitle, supplierFirstName, supplierLastName}) => {

    return (
        <tr>
            <td>
                <Card.Link as={Link} to={Routes.Suppliers.path} className="fw-normal">
                    {id}
                </Card.Link>
            </td>
            <td>
              <span className="fw-normal">
                {accountNumber}
              </span>
            </td>
            <td>
              <span className="fw-normal">
                {supplierTitle}
              </span>
            </td>
            <td>
              <span className="fw-normal">
                {supplierFirstName}
              </span>
            </td>
            <td>
              <span className="fw-normal">
                {supplierLastName}
              </span>
            </td>
      );
    };

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

【讨论】：

【解决方案2】：

您应该使用componentDidMount() 和state。

class SupplierData extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            supplier: null,
            errorMessage: null
        };
    }

    componentDidMount () {
        axios.get('http://localhost:8080/api/suppliers/supplier/list')
            .then (res => {
                this.setState({ supplier: res.data });
            }).catch (err => {
                this.setState({ errorMessage: err });
            });
    }

    render () {
        if (this.state.supplier && !this.state.errorMessage) {
            return (
                <table>
                    <thead></thead>
                    <tbody>
                        {this.state.supplier.map((value, index) => (
                            <tr key={index}>
                                <td>{value.id}</td>
                                <td>{value.supplierTitle}</td>
                                <td>{value.supplierFirstName}</td>
                                <td>{value.supplierLastName}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            );
        } else if (!this.state.supplier && this.state.errorMessage) {
            return (
                <div>
                    <p>{this.state.errorMessage}</p>
                </div>
            );
        }

        return (
            <div>
                <p>Please wait, data fetching...</p>
            </div>
        );
    }
}

如果供应商不为空（等于数据）且errorMessage为空，则呈现数据。

如果供应商为 null 且 errorMessage 不为 null，则呈现 errorMessage。

如果两者都为空，则呈现“请稍候”消息。

您可以使用 css 类自定义样式。

【讨论】：