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

我有一个函数，可以调用服务器并以json对象的

数组的形式检索数据

，我想要的是迭代数据并在

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;

从“React”导入React；
从“axios”导入axios；
功能供应商（）{
让供应商列出=[]；
React.useffect（（）=>{
getAllSuppliers（）；
});
const getAllSuppliers=（）=>{
返回axios.get（'http://localhost:4000/supplier，供应商数据）。然后(
响应=>{
让所有供应商=response.data；
allSuppliers.forEach（元素=>{
供应商列表(
{element.supplier_name}
);
});
}，错误=>{
//处理错误
}
);
}
返回(

{供应商名单}

)
}
导出默认供应商；

当我

console.log

查看

suppliers\u列表

时，我得到了以下信息：

---

如下图所示更改代码

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;

从“React”导入React；
从“axios”导入axios；
功能供应商（）{
const[suppliersList，setSuppliersList]=React.useState（[]）；
React.useffect（（）=>{
getAllSuppliers（）；
}，[]）；//希望只执行一次getAllSuppliers函数，因此[]个空方括号
const getAllSuppliers=（）=>{
返回axios.get（'http://localhost:4000/supplier，供应商数据）。然后(
响应=>{
设置供应商列表（响应数据）；
}，错误=>{
//处理错误
}
);
}
返回(

{suppliersList.map（supplierObject=>{
返回
{supplierObject.supplier\u name}
})}

)
}
导出默认供应商；

如下图所示更改代码

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;

从“React”导入React；
从“axios”导入axios；
功能供应商（）{
const[suppliersList，setSuppliersList]=React.useState（[]）；
React.useffect（（）=>{
getAllSuppliers（）；
}，[]）；//希望只执行一次getAllSuppliers函数，因此[]个空方括号
const getAllSuppliers=（）=>{
返回axios.get（'http://localhost:4000/supplier，供应商数据）。然后(
响应=>{
设置供应商列表（响应数据）；
}，错误=>{
//处理错误
}
);
}
返回(

{suppliersList.map（supplierObject=>{
返回
{supplierObject.supplier\u name}
})}

)
}
导出默认供应商；

您应该为您的

供应商列表使用
useState
钩子。将其声明为var意味着它不是被动的，因此组件将忽略对它的更改。@ChaseDeAnda我是
Reactjs
的新手，请回答这个问题好吗？我试图使用
useState
，但出现错误
对象作为React子对象无效
您应该为您的
供应商列表使用
useState
挂钩。将其声明为var意味着它不是被动的，因此组件将忽略对它的更改。@ChaseDeAnda我是
Reactjs
的新手，请回答这个问题好吗？我试图使用
useState
，但出现错误
对象作为React子对象无效