[英]useState and map - React
我在前端使用 React。 我正在使用功能组件。 我正在使用 Axios 从 API 获取。
在文件GetAllSuppliers.js中,我有以下内容:
function GetAllSuppliers(){
const [supplier, setSupplier] = useState([]);
useEffect(() => {
return axios.get(`http://localhost:8080/api/suppliers/supplier/list`)
.then((response) =>{
setSupplier((prevState) =>({ ...prevState,
id: response.data.id ,
supplierTitle: response.data.supplierTitle,
supplierFirstName: response.data.supplierFirstName,
supplierLastName: response.data.supplierLastName,
companyName: response.data.companyName,
phoneNumber: response.data.phoneNumber,
otherPhoneNumber: response.data.otherPhoneNumber,
accountNumber: response.data.accountNumber,
email: response.data.email,
address: response.data.address,
website: response.data.website,
hourlyRate: response.data.hourlyRate,
typeOfGoods: response.data.typeOfGoods,
paymentTerms: response.data.paymentTerms,
createdAt: response.data.createdAt,
notes: response.data.notes,
products: response.data.products,
components: response.data.components
}));
}).catch((error) =>{
setSupplier(error);
})
});
}
//other functions
export { GetAllSuppliers, other functions .... };
在FileB.js中,我有以下代码:
{GetAllSuppliers.supplier.map(t => <TableRow key={`supplier-${t.id}`} {...t} />)}
我收到以下错误:
TypeError: Cannot read property 'map' of undefined
上述错误的可能修复方法是什么?
当您在未定义的东西上运行map()
时,就会发生这种情况。 90% 的时间,这意味着您没有处理 axios 调用正在进行中并且您的变量尚未准备好(在此上下文中可能是 GetAllSuppliers)的情况。
放入处理这种情况的条件返回。
在您的setSupplier
中,您正在设置 object,但您需要将数组返回到 map。
像这样的东西:
setSupplier((prevState) => {
return [
...prevState,
{
id: response.data.id,
supplierTitle: response.data.supplierTitle,
supplierFirstName: response.data.supplierFirstName,
supplierLastName: response.data.supplierLastName,
companyName: response.data.companyName,
phoneNumber: response.data.phoneNumber,
otherPhoneNumber: response.data.otherPhoneNumber,
accountNumber: response.data.accountNumber,
email: response.data.email,
address: response.data.address,
website: response.data.website,
hourlyRate: response.data.hourlyRate,
typeOfGoods: response.data.typeOfGoods,
paymentTerms: response.data.paymentTerms,
createdAt: response.data.createdAt,
notes: response.data.notes,
products: response.data.products,
components: response.data.components,
},
];
});
```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.