我的前端使用 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
上述错误的可能修复方法是什么?
答案 0 :(得分:1)
当您在未定义的内容上运行 map()
时会发生这种情况。 90% 的情况下,这意味着您没有处理 axios 调用正在进行中并且您的变量尚未准备好(在这种情况下可能是 GetAllSuppliers)的情况。
放入处理这种情况的条件返回。
答案 1 :(得分:0)
在您的 setSupplier
中,您正在设置一个对象,但您需要返回一个要映射的数组。
像这样:
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,
},
];
});
```