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

【问题标题】：React Axios useEffect hook, different types of errors when rendering to the user interfaceReact Axios useEffect hook，渲染到用户界面时出现不同类型的错误
【发布时间】：2020-05-08 04:26:35
【问题描述】：

我对全栈很陌生，而且我正在使用 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

感谢您的帮助。

【问题讨论】：

好吧，当您说“错误”时，请具体说明该消息是什么，如果相关，它会出现在哪一行。您还覆盖了 data 变量，这只是令人困惑并且必然会导致问题。目前它指的是状态中的数据，和地图函数中的每个项目。给它们命名不同的东西。另外，我认为在您的地图函数中，您希望返回一个带有映射项值的 div，而不是状态数据值，例如.map(item => <div key={item.food}>FOOD: {item.food}, ORDERS: {item.orders}</div>)
我已经指定了错误......并且它在返回块中是具体的。

标签： reactjs api user-interface axios use-effect

【解决方案1】：

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

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

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

【讨论】：

嗨。没用。 0 只是在屏幕上闪烁然后消失。控制台吐出一个警告说。列表中的每个孩子都应该有一个唯一的“关键”道具。但是我们已经在我们的 div 中提供了一个唯一的键！？
更新 - 虽然当我用
标记的键替换 div 时，我得到渲染的项目符号但它们旁边没有信息！？

【解决方案3】：

你可以这样做。首先，您需要在访问data[0] 之前验证长度，因为在从服务器获取数据之前数组是空的。不要在状态和映射函数参数中使用相同的变量名data。虽然它有效，但阅读不清楚。此外，您不能使用 data._id 作为映射 div 的键，因为它需要一个唯一值。在您的范围内，data 变量是本地参数，而不是状态。这就是使用另一个参数名称item 而不是数据的原因。您也可以使用 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>
);

【讨论】：