如何在 useEffect React JS 中添加到数组

Question

我正在使用 React JS 开发一个 Firebase 项目，我需要将数据库中的数据附加到一个数组中。当我像这样添加到数组时：

const db = firebase.firestore()
const docData = []
useEffect(() => {
  db.collection("articles").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        docData.push(doc.data())

    });
  });
  console.log(docData)
}, [])

这会在控制台中正确显示数据，但是当我 return 像这样在 useEffect 之外的数据时：

return (
    <div className="App">
      {docData}
    </div>
  );

这不是 return 任何数组。我是 React JS 的新手，如有任何帮助，我们将不胜感激。

Answer 1

您需要将 docData 放入状态变量中，以便更新和渲染它。在承诺链回调中声明一个数组，然后更新组件状态。

const [docData, setDocData] = React.useState([]);

useEffect(() => {
  db.collection("articles")
    .get()
    .then((querySnapshot) => {
      const docData = []; // locally scoped to callback
      querySnapshot.forEach((doc) => {
        docData.push(doc.data());
      });
      setDocData(docData); // update state
      console.log(docData);
    });
}, []);

...

return (
  <div className="App">
    {docData}
  </div>
);

有些人可能认为更干净的替代方法是将快照数据映射到数组。

useEffect(() => {
  db.collection("articles")
    .get()
    .then((querySnapshot) => {
      const docData = querySnapshot.map((doc) => doc.data());
      setDocData(docData);
      console.log(docData);
    });
}, []);

如何在 useEffect React JS 中添加到数组

How to add to an array in useEffect React JS

reactjs

react-hooks

use-effect

use-state