渲染 Firebase 结果时，对象作为 React 子级无效（找到：[object Promise]）

Question

我收到以下错误：

对象作为 React 子级无效（找到：[object Promise]）。如果您打算渲染一组子项，请改用数组。

我在 react 中使用上下文并且遇到了道具问题，因为我在内部组件中有 forEach 循环以从数据库中获取数据。

我不知道如何在这里使用数组来渲染集合。

这里是获取发生错误的数据的代码：

import React, { useEffect, useState } from "react";
import { db } from "../services/firebase";
import style from "./css/dashboard.module.css";
import InputTask from "./InputTask";
import Task from "./Task";

const Tasks = ({ user }) => {
  console.log("Tasks");

  return (
    <>
      <div className={style.card}>
        <InputTask user={user} />
      </div>

      {true
        ? db
            .collection("Users")
            .doc(`${user.email}`)
            .collection("tasks")
            .get()
            .then((querySnapshot) => {
              querySnapshot.forEach((doc) => {
                console.log(doc.id, " => ", doc.data());
                return (
                  <div className={style.card}>
                    <Task todo={doc} />
                  </div>
                );
              });
            })
        : null}
    </>
  );
};

export default Tasks;

附加错误快照here

Answer 1

您的渲染方法（部分附在下面）不会等到.then 被触发。相反，它将按原样返回Promise。因此你提到的Error: Objects are not valid as a React child (found: [object Promise])。

{
  true
    ? db
        .collection("Users")
        .doc(`${user.email}`)
        .collection("tasks")
        .get()
        .then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            console.log(doc.id, " => ", doc.data());
            return (
              <div className={style.card}>
                <Task todo={doc} />
              </div>
            );
          });
        })
    : null
}

由于这是一个异步操作，因此最好为这部分使用状态。例如，您可以在组件挂载时获取数据（使用useEffect），将所有内容置于状态（使用useState），然后渲染状态。

import React, { useEffect, useState } from "react";
import { db } from "../services/firebase";
import style from "./css/dashboard.module.css";
import InputTask from "./InputTask";
import Task from "./Task";

const Tasks = ({ user }) => {
  const [tasks, setTasks] = useState([]);

  // fetching data again when user changes
  useEffect(() => {
    db
      .collection("Users")
      .doc(`${user.email}`)
      .collection("tasks")
      .get()
      .then((querySnapshot) => {
        setTasks(querySnapshot);
      })
  }, [user]);

  return (
    <>
      <div className={style.card}>
        <InputTask user={user} />
      </div>

      {tasks.length
        ? tasks.map((task) => 
            <div className={style.card}>
              <Task todo={task} />
            </div>
          )
        : null}
    </>
  );
};

export default Tasks;

Answer 2

你还没有从 react 导入 useContext 钩子

试试这个

import React, { useEffect, useState, useContext } from "react";
import { auth } from "../services/firebase";

export const AuthContext = React.createContext();

export const AuthProvider = (props) => {
  const [loading, setLoading] = useState(true);
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });
  }, []);
  if (loading) {
    return <p>Loading...</p>;
  }
  // console.log(children);
  return (
    <AuthContext.Provider value={{ currentUser }}>
   
      {props.children}
  
    </AuthContext.Provider>
  );
};