在呈现 Firebase 结果时，对象作为 React 子项（找到：[object Promise]）无效

Question

我收到以下错误：

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我在 React 中使用了 context 并且在使用 props 时遇到了问题，因为我在内部组件中有 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

你还没有从 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>
  );
};

Answer 2

您的渲染方法（下面附上的部分）不会等到 .then 被触发。相反，它将 return 和 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;

在呈现 Firebase 结果时，对象作为 React 子项（找到：[object Promise]）无效

Objects are not valid as a React child (found: [object Promise]) while rendering Firebase results

javascript

firebase

reactjs

firebase-authentication

use-context