组件无法正确呈现

Question

我刚开始在我的项目中使用 React Context 和 Hooks。目前，当我的组件中的项目最初加载时未显示在屏幕上但当我单击某个按钮时该项目确实显示在屏幕上时，我目前面临一个问题。

我确实使用 console.log 和 in the console, it did shows my data, but on the screen, it shows nothing. The weird part is, when I clicked on any button on the screen, 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>

我可以知道我的错误或遗漏了什么吗？ 抱歉我的英语不好，感谢阅读

Answer 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，它告诉挂钩在第一次加载时运行。

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

Answer 2

尚不清楚where/how您正在使用 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]);
          })
      ...
  });
  ...
};

组件无法正确呈现

Component doesn't render properly

javascript

reactjs

google-cloud-firestore

react-context

react-hooks