React Axios 使用效果钩子，渲染到用户界面时不同类型的错误

Question

我对全栈很陌生，并且我使用的是MERN的，所以请原谅我，如果这是一个简单/愚蠢的修复(尽管我查看了几种不同类型的来源，但没有运气因此毛皮(。

我似乎无法渲染我的项目数组来反应 ui。我收到 GET 请求并将其记录到控制台，所以我知道它在那里，但是当我尝试映射它或将其放入带有简单函数的div 中以迭代它或只是简单地显示 JSON 文件中的一些信息时，我不断收到错误。这是 JSON 文件(通过了验证检查(和我正在使用的组件。

[
{
"_id": "5e1ff19d926f7c245ce01d7c",
"foodmenu": [
{
"food": "burger",
"orders": 0
},
{
"food": "fish",
"orders": 0
},
{
"food": "salad",
"orders": 0
},
{
"food": "curry",
"orders": 0
},
{
"food": "sushi",
"orders": 0
},
{
"food": "egg rolls",
"orders": 0
},
{
"food": "Jacket potatoe",
"orders": 0
},
{
"food": "hash browns",
"orders": 0
},
{
"food": "mash potatoe",
"orders": 0
},
{
"food": "pizza",
"orders": 0
},
{
"food": "sandwhich",
"orders": 0
},
{
"food": "omlete",
"orders": 0
}
]
}
]

import React, { Fragment, useState, useEffect } from "react";
import axios from "axios";
function Orders() {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios("api/orders/foodmenu/foodtypes");
setData(result.data);
console.log(result.data);
};
fetchData();
}, []);
return (
<div>
{data[0].foodmenu.map(data => (
<div key={data._id}>{data.foodmenu}</div>
))}

</div>
)

};
export default Orders;

我收到键入错误，例如：

TypeError: Cannot read property 'foodmenu' of undefined

&

TypeError: Cannot read property 'map' of undefined

我很感激你的帮助。

Answer 1

const tablelist = data.map((data, key) => {
return (
<tr key={key}>
<td>{data.orderID}</td>
<td>{data.orderDateTime}</td>
<td>{data.priceTotal}</td>
)

在你的useeffect((中执行此操作，并在返回中调用{tablelist}

Answer 2

如果您先添加一个简单的长度检查，它应该可以工作。问题是组件在加载数据之前呈现。这意味着data[0]将是未定义的，因此访问其上的属性将失败。

使用长度检查，由于&&是延迟计算的，因此组件将返回 false，直到数据数组中包含元素，并且不会尝试执行组件中的其余代码。

return (data.length &&
<div>
{data[0].foodmenu.map(data => (
<div key={data._id}>{data.foodmenu}</div>
))} 
</div>)

Answer 3

你可以这样做。首先，您需要在访问data[0]之前验证长度，因为在从服务器获取数据之前数组为空。不要在状态和映射函数参数中使用相同的变量名data。虽然它有效，但阅读不清楚。此外，您不能使用data._id作为映射div 的键，因为它需要一个唯一的值。在您的作用域中，data变量是局部参数，而不是状态。这就是使用另一个参数名称item而不是数据的原因。您也可以使用映射函数中的第二个参数index作为键。最后，您必须使用正确的显示文本，例如{item.food} - {item.orders}而不是尝试打印对象或数组。

return (
<div>
{data.length > 0 && data[0].foodmenu.map((item, index) => (
<div key={index}>{item.food} - {item.orders}</div>
))}
</div>
);