如何在 ReactJS 中遍历数据并在 JSX 中显示它们？答案

【问题标题】：How to iterate through data and display them in JSX in ReactJS?如何在 ReactJS 中遍历数据并在 JSX 中显示它们？
【发布时间】：2020-05-13 08:30:32
【问题描述】：

我有一个函数可以调用服务器并以array of json objects 的形式检索数据，我想要的是遍历数据并将它们显示在JSX 中。

问题是 屏幕上没有显示任何内容，甚至没有出现错误。当我console.log 得到回复时：

下面是组件

import React from 'react';
import axios from 'axios';

function Supplier(){

    let suppliers_list=[];

    React.useEffect(() => {
        getAllSuppliers();
    });


    const getAllSuppliers = () =>{
        return axios.get('http://localhost:4000/supplier',supplierData).then(
            response=>{
                let allSuppliers = response.data;

                allSuppliers.forEach(element => {
                    suppliers_list.push(
                    <li>{element.supplier_name}</li>
                    );
                });

            },error =>{
                //handle error
            }
        );
    }


    return(
        <div>
            <ul>
                {suppliers_list}
            </ul>
        </div>
    )
}
export default Supplier;

当我console.log suppliers_list 我得到了这个：

【问题讨论】：

您应该为您的suppliers_list 使用useState 挂钩。将其声明为 var 意味着它不是响应式的，因此您的组件将忽略对它的更改。
@ChaseDeAnda 我是Reactjs 的新手，你能回答吗？我尝试使用useState，但出现错误Objects are not valid as a React child

标签： javascript reactjs loops jsx

【解决方案1】：

如下更改您的代码，

import React from 'react';
import axios from 'axios';

function Supplier(){

    const [suppliersList, setSuppliersList] = React.useState([]);

    React.useEffect(() => {
        getAllSuppliers();
    }, []); // Hoping you want to execute getAllSuppliers function only once, so [] empty square braces 


    const getAllSuppliers = () =>{
        return axios.get('http://localhost:4000/supplier', supplierData).then(
            response=>{
                setSuppliersList(response.data);
            },error =>{
                //handle error
            }
        );
    }


    return(
        <div>
            <ul>
                {suppliersList.map(supplierObject => {
                return <li>{supplierObject.supplier_name}</li>
                })}
            </ul>
        </div>
    )
}
export default Supplier;

【讨论】：