Question

我是在项目中使用 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;

在食品组件中，我尝试从OrderContext获取food并在<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

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

在哪里/如何使用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]);
          })
      ...
  });
  ...
};

组件无法正确渲染

2 个答案: