React Axios useEffect钩子，渲染到用户界面时出现不同类型的错误

Question

我对全栈非常陌生，而且我正在使用MERN，所以如果这是一个简单/愚蠢的修复，请原谅我(尽管我研究了几种不同类型的源码，因此没有幸运的皮毛)。

我似乎不能将我的项目数组呈现给reacts。我得到了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而不是data的原因。您也可以使用map函数中的第二个参数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>
);