[英]How to iterate through data and display them in JSX in ReactJS?
我有一个函数可以调用服务器并array of json objects
形式检索数据,我想要的是遍历数据并将它们显示在JSX
。
Thw 问题是屏幕上没有显示任何内容,甚至没有出现错误。 当我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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.