為什么我的組件在調用時無法運行？

Question

我正在努力尋找為什么我的組件沒有響應其父組件的調用。 我正在嘗試將 Cloud Firestore 與之前使用 Redux 運行的代碼集成。我的第一個目標是使用來自 Firestore 的數據填充我的列表。

這是我的（簡化的）有問題的組件：

// List.js
import React, { useEffect, useState } from "react";
import db from "../../db";
import { onSnapshot, query, collection, orderBy } from "firebase/firestore";

import TaskItem from "./TaskItem";

const List = () => {
  const [taskList, setTaskList] = useState([]); // Currently assumes DB never empty, populates on initial render
  const [isInitialRender, setIsInitialRender] = useState(true);

  // Firestore
  const ref = collection(db, "Tasks");
  const q = query(ref, orderBy("listIndex"));

  useEffect(() => {
      // Execute only on initial render
      if (isInitialRender) {
        // Populate task list
        onSnapshot(q, (querySnapshot) => {
            setTaskList(() => querySnapshot.docs)
        }, (error) => {
          console.log(error)
        })
      };

      setIsInitialRender(() => false);
  }, []);

  return (
    <>
      <h2>List</h2>
        {taskList.forEach((task) => ( // console-logging `task` here will output correct data
          <ul key={task.data().key}>
            <TaskItem
              id={task.data().key}
              // docRef={taskDoc}
            />
          </ul>
          ))
        }
    </>
  );
};

export default List;

// TaskItem.js
import React from "react";

const TaskItem = (props) => {
  console.log('This will not print')

  const submitHandler = () => console.log('Submitted');

  return (
    <form onSubmit={submitHandler}>
      <input
        autoFocus
        type="text"
      />
    </form>
  );
};

export default TaskItem;

我努力了：

1. 用每個文檔中的數據填充 state（而不是直接分配它），然后將內容作為 props 傳遞。 這導致了（我相信）無限循環，理想情況下我無論如何都想將實際的 DocumentReference 傳遞給 TaskItem。 所以這對我來說是一個半身像。
2. 返回[...querySnapshot.docs] ，甚至(prev) => prev = [...querySnapshot.docs]在 state setter 中。 TaskItem() 沒有響應。
3. 將 taskList state 分解為一個新的虛擬數組，並使用該數組填充 TaskItem 的道具。

我知道任務數據正在成功獲取，因為我可以在 List 的返回語句中從 map function 令人滿意地記錄 taskList 的內容。 但似乎 TaskItem() 從未運行過。

有人在這里看到我的錯誤嗎？

Answer 1

編輯：抱歉，我假設你使用的是 map。我不確定為什么你的 forEach 不工作，但 map 會工作，從我的例子

編輯 2：您可能希望使用 map，因為您想要轉換數組中的每個元素： JavaScript：Difference between.forEach() and.map()

您忘記從 map return一些東西，可能需要 {} 代替。

嘗試

 {taskList.forEach((task) => {
       return ( 
          <ul key={task.data().key}>
            <TaskItem
              id={task.data().key}
              // docRef={taskDoc}
            />
          </ul>
         )
          })