Question

我的数据库中有一个未读属性，该属性用于计算unreadCount。现在，我正在使用Firebase，并且已添加有关componentDidMount()中未读属性何时更改的侦听器。每当Firebase中的未读内容发生变化时，它都会在我的props.user.unread中更新componentDidUpdate()，看起来像-

componentDidUpdate(prevProps) {
    if(prevProps.user.unread !== this.props.user.unread ) {
        console.log("PREV PROPS",prevProps.user.unread)
        console.log("CURR PROPS",this.props.user.unread)
        this.setState({unreadCount:0})
        this.handleUnread(this.props.user.unread)
    }
}

和this.handleUnread看起来像-

handleUnread(obj) {
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            console.log("OBJ",obj[key])
            if(obj[key] > 0) {
                this.setState({unreadCount: this.state.unreadCount +1})
            }
        }
    }
}

在handleUnread(obj)中，我正在更新state.unreadCount，即使我的条件不满足，这也会导致componentDidUpdate(prevProps)重新运行。我的控制台日志看起来像this。显然，即使不满足条件，componentDidUpdate也被多次调用。每次调用handleUnread()时，我的状态都会改变，我的问题是它是否在handleUnread()中再次调用componentDidUpdate？

如果是这样，为什么好像没有满足条件。还有没有其他方法可以解决此问题，而不是使用 state 来衡量unreadCount？

更新

handleUnread被调用，即使其内部和componentDidUpdate内部没有任何状态更改。

Answer 1

经过对React挂钩的研究，我发现它们本质上是异步的。本质上是异步的，在循环内调用this.setState()是一个坏主意。因此，我通过在prevState中添加componentDidUpdate字段进行修复，并仅在循环完成后设置状态。

componentDidUpdate（）在状态变化时更新，即使状态没有变化

更新

1 个答案: