React Ax ios useEffect hook, различные типы ошибок при рендеринге в пользовательский интерфейс - PullRequest
Новая
       37

React Ax ios useEffect hook, различные типы ошибок при рендеринге в пользовательский интерфейс

0 голосов
/ 22 января 2020

Я довольно новичок в полном стеке, и я использую MERN, так что простите, если это простое / глупое исправление (хотя я посмотрел на несколько разных типов источников, без везения, таким образом, меха).

Я не могу сделать так, чтобы мой массив элементов реагировал на пользовательский интерфейс. Я получаю запрос GET и записываю его в консоль, чтобы я знал его там, но когда я go и пытаюсь отобразить его или поместить в 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

Я ценю помощь.

Ответы [ 3 ]

1 голос
/ 06 мая 2020 
const tablelist = data.map((data, key) => {
              return (
                <tr key={key}>
                  <td>{data.orderID}</td>
                  <td>{data.orderDateTime}</td>
                  <td>{data.priceTotal}</td>
)

Сделайте это в вашем useeffect () и вызовите {tablelist} внутри return

0 голосов
/ 06 мая 2020

Вы можете сделать это так. Во-первых, вам нужно проверить длину перед доступом к 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>
);
0 голосов
/ 22 января 2020

Если сначала добавить простую проверку длины, она должна работать. Проблема в том, что компонент отображается до загрузки данных. Это означает, что data[0] будет неопределенным, и, следовательно, доступ к его свойствам не удастся.

Используя проверку длины, поскольку && оценивается лениво, ваш компонент будет возвращать false, пока в вашем массиве данных не будут элементы внутри него, и не будет пытаться выполнить остальную часть кода в компоненте. 

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