Компонент не отображается должным образом

Question

Я новичок в использовании React Context и Hooks в моем проекте. В настоящее время я сталкиваюсь с проблемой, когда мой элемент в компоненте не отображается на экране при его первоначальной загрузке, но элемент отображается на экране, когда я нажимаю какую-либо кнопку.

Я сделал некоторую отладку, используя console.log и в консоли , он действительно показывает мои данные, но на экране ничего не показывает. Странная часть, когда я нажимаю на любую кнопку на экране, это наконец-то показывает что-то на экране .

Вот мой код, в OrderContext, я получаю все свои данные изFirestore.

//OrderContextProvider.js
import React, { createContext, useState, useEffect } from "react";
import Firebase from "../component/misc/firebase";

export const OrderContext = createContext();

const OrderContextProvider = props => {
  const [userLocation, setUserLocation] = useState({
    shop: "XXXXXXX"
  });
  const [food] = useState([]);
  useEffect(() => {
    userLocation.shop != null
      ? Firebase.firestore()
          .collection("restaurants")
          .doc(userLocation.shop)
          .collection("foods")
          .get()
          .then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
              food.push(doc.data());
            });
          })
          .catch(function(error) {
            console.log("Error getting documents: ", error);
          })
      : console.log("User location unknown, please insert the location!");
  }, [food]);

  return (
    <OrderContext.Provider value={{ userLocation, food }}>
      {props.children}
    </OrderContext.Provider>
  );
};

export default OrderContextProvider;

и в компоненте Foods я попытался получить food из OrderContext и отобразить <Foods/> в <Home/>

//foods.js
import React, { useEffect, useContext } from "react";
import { OrderContext } from "../../context/OrderContextProvider";
import { Grid } from "@material-ui/core";

const Foods = () => {
  const { food } = useContext(OrderContext);

  useEffect(() => {
    console.log(food);
  }, []);

  return food.map((foods, index) => {
    return (
      <Grid key={index} item xs={6} sm={6} md={3} xl={3} className="food">
        {foods.name}
      </Grid>
    );
  });
};

export default Foods;

//foods.js
 <Grid container className="container">
     <Foods/>
 </Grid>

Могу я узнать, в чем моя ошибкаили что я здесь упустил? Извините за мой плохой английский и спасибо за чтение

Answer 1

Пока неясно, где и как вы используете компонент OrderContextProvider. Но одна возможная проблема, которую я вижу в коде, - это способ обновления массива «food». То, как вы помещаете в него элементы, не обязательно вызывает обновления, поскольку вы не обновляете состояние. Возможно, вы захотите сделать что-то вроде -

const OrderContextProvider = props => {
  ....
  const [food, setFood] = useState([]);
  useEffect(() => {
      ...
          .then(function(querySnapshot) {
              let newFoods = [];
              querySnapshot.forEach(function(doc) {
                 newFoods.push(doc.data());
              });
              setFood([...food, ...newFoods]);
          })
      ...
  });
  ...
};

Answer 2

const food = [];
  useEffect(() => {
    userLocation.shop != null
      ? Firebase.firestore()
          .collection("restaurants")
          .doc(userLocation.shop)
          .collection("foods")
          .get()
          .then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
              food.push(doc.data());
            });
          })
          .catch(function(error) {
            console.log("Error getting documents: ", error);
          })
      : console.log("User location unknown, please insert the location!");
  },[food]);

Вы не передали второй аргумент в useEffect, который говорит хуку запускаться при первой загрузке.

Я думаю, это причина того, что он не показывает данные при первой загрузке,