React useEffect 是如何工作的？答案

【问题标题】：React useEffect how it works?React useEffect 是如何工作的？
【发布时间】：2021-01-15 22:02:50
【问题描述】：

我正在为数据库使用 Firebase 云。这个 useEffect 从集合中读取每个文档（“电子邮件）”

据我所知，useEffect 将在每次加载组件时运行或
当某些数据发生变化时，如果我们将其设置在 [ ] ( useEffect() => {}, []);

但我的问题是，当我发送邮件（更新“电子邮件”）时，我的组件如何知道“重新呈现整个列表”。当我在最后 []

没有任何东西时

如果有人可以检查最后一个帖子，我的项目 gmail 克隆也有问题。

React.js + REDUX... I don't know, for some reson when I remove star from starred section, it render me "emails"(all inbox) not "starredEmails"

useEffect(() => {
        const readData = () => {
            db.collection("emails") // uzimi emails kolekciju
                .orderBy("timestamp", "desc") // rapsoredi ih po timestampu
                .onSnapshot((
                    snapshot // uzmi snapshot trenutni
                ) =>
                    setEmails(
                        // stavi mail da bude ovo
                        snapshot.docs.map((doc) => ({
                            id: doc.id, // id = doc.id nDqpnWjBpy....
                            data: doc.data(), // ovo je zapravo message,subject,to itd..
                        }))
                    )
                );
        };
}, []);

【问题讨论】：

传递给useEffect 的第二个参数是一个状态值列表，用于确定useEffect 处理程序何时再次运行。换句话说，您拥有的处理程序只会以您现在拥有的方式运行一次。它不应该重新渲染。
是的，我知道。但是当我发送邮件时。新邮件只是在屏幕上添加它出于某种原因重新呈现。你甚至可以在这里尝试这是我的克隆 clone-3857a.firebaseapp.com>
因为您通过调用onSnapshot 订阅对集合的更改。所以每次它发出一个事件时，你的setEmail 都会被调用，因此组件会重新渲染。请注意，取消订阅更改是合适的。您可以使用onSnapshot 的返回值来取消订阅。只需在 useEffect 中将该函数返回为 cleanup。

标签： javascript reactjs

【解决方案1】：

您刚刚在componentDidMount 挂钩中定义了readData 函数，并且您可能会在组件中的某个位置使用它。请记住，定义与调用不同。还要记住，React 会在任何值（prop/state）发生变化时重新渲染组件。

因此，避免您所说的一种方法是有条件地实现setErrors，如下所示：

setEmails(prevState => {
    if (prevState === []) {  // updating only initially, pass your initial emails' value here
       return snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data()
        }));
    } else return prevState;
)

【讨论】：