组件未正确呈现答案

【问题标题】：Component doesn't render properly组件未正确呈现
【发布时间】：2020-02-19 19:28:41
【问题描述】：

我是在我的项目中使用 React Context 和 Hooks 的新手。目前，当我的组件中的项目在最初加载时未显示在屏幕上但当我单击某个按钮时项目确实显示在屏幕上时，我遇到了一个问题。

我确实使用console.log和in the console进行了一些调试，它确实显示了我的数据，但在屏幕上，它什么也没显示。奇怪的是，当我点击屏幕上的任何按钮时，it finally show something on the screen。

这是我的代码，在 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 组件中，我尝试从 OrderContext 获取 food 并在 <Home/> 中显示 <Foods/>

//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>

我可以知道我的错误或我在这里错过了什么吗？ 对不起，我的英语不好，感谢阅读

【问题讨论】：

您好，您可以在 OrderContextProvider.js 中发布完整的代码吗？我有兴趣了解您如何/在何处定义上下文。我对发生的事情有预感，但需要先查看代码。
@IshworTimilsina 嗨，我刚刚更新了问题，请看一下。

标签： javascript reactjs google-cloud-firestore react-hooks react-context

【解决方案1】：

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 来告诉钩子在第一次加载时运行。

我想这就是它在第一次加载时没有显示数据的原因。

【讨论】：

即使我在 useEffect 中传递了第二个参数，它仍然不会在屏幕上显示我的项目。无论如何，谢谢！

【解决方案2】：

目前尚不清楚您在何处/如何使用 OrderContextProvider 组件。但是，我在代码中看到的一个可能问题是您更新“食物”数组的方式。您将项目推入其中的方式不一定会触发更新，因为您没有更新状态。你可能想做一些类似的事情 -

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

【讨论】：

@nhk96 没问题。