我有一个调用服务器并以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
时,我得到了:
如下更改代码,
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;