从 Firebase 服务器响应更新状态

Question

我有一个 firebase 数据库，它有一个名为“post”的集合，在 post 中有 6 个变量（displayName、userName、verified、text、image、avatar）。这个想法是，数据库中会有多个帖子。

反应代码：

  const [posts, setPosts] = useState([]);
    
    //Whenever the firebase database changes, it runs this method
    useEffect(() => {
        db.collection("posts").onSnapshot((snapshot) =>
            //Loops through all the posts and adds the data into an array
          setPosts(snapshot.docs.map((doc) => doc.data()))
        );
      }, []);

在 react 中，我有两个状态变量，posts 和 setPosts。我假设它们最初只是设置为空数组。

现在我有了useEffect 函数，我被告知只要数据库更改/更新就会运行该函数。第一个问题，函数如何知道数据库更新了？换句话说，useEffect 函数是如何工作的？

其次，我很确定，post 变量最终会成为数据库中所有 post 对象的列表。我不确定那是怎么发生的。我在上面附上了更新此状态的代码，但我不太确定它是如何工作的。你能把它分解并解释它是如何工作的吗？我也不确定 setPosts 状态的用途。

请告诉我！

Answer 1

在上面

1. 在第 1 行 - 您已使用状态挂钩将 posts 设置为空数组。可以在此处阅读更多内容以了解状态挂钩的含义 - https://reactjs.org/docs/hooks-state.html

2. 接下来您设置一个 useEffect 挂钩函数 (https://reactjs.org/docs/hooks-effect.html) 以在渲染后进行后端 (firebase) api 调用。

3. 在钩子函数中，您正在从 firebase 中的 posts 集合中查找数据，并返回该集合中所有文档的快照。 db.collection("posts").onSnapshot(callBack)。每次使用众所周知的观察者模式对底层数据库进行更改时都会调用回调函数（在以下链接中阅读更多信息https://rxjs-dev.firebaseapp.com/guide/overview，https://firebase.google.com/docs/reference/node/firebase.firestore.CollectionReference#onsnapshot）

4. 然后在 onSnapshot 回调函数中，您会得到一个包含文档的数组，该数组使用 javascript Map 函数snapshot.docs.map((doc) => doc.data()) 进一步映射到输出数组。 https://www.w3schools.com/jsref/jsref_map.asp

5. 最后，这个输出数组被设置在posts 变量中，使用 setPosts() 方法。

希望此细分对您有所帮助，我建议您详细阅读链接，以便清楚了解所有内容是如何组合在一起的。