Question

当前Web应用程序链接：https://react-recycle.firebaseapp.com/

项目组件代码：https://github.com/steveula/react-recycle/blob/master/src/components/items/Item.js

redux-firestore API：https://github.com/prescottprue/redux-firestore

注意：：快速注册一个带有虚假信息的帐户，并安装了React Dev Tools和Redux Dev工具来查看问题。

对于我的项目，Firestore中的回收物料位于物料组件卡中，如您在仪表板的侧栏上所见。您可以复制它们并删除它们。如果导航到没有“项目”组件的页面，例如“提示和事实”，然后返回到仪表板，则“项目”组件的功能就可以正常工作。如果您查看REDUX DEV TOOLS，您将看到firestore.ordered.userItems相应地更新。

但是，如果您随后导航到也包含Item组件的页面（例如“统计信息”），然后尝试复制或删除它们，则该操作将在Firestore的后端成功更新，但不处于redux状态，，特别是firestore.ordered.userItems，因此道具不会更新，因此UI也不会重新呈现。 如果您导航到没有Item组件的页面，问题将不再存在。

我认为问题与监听器有关，所以我尝试使用redux-firestore的setListeners()和onSnapshot()函数，但是没有用。

该如何解决此问题？

（PS：很抱歉，如果我对这里的基本知识不了解。我是React＆Firestore的新手，这是我第一个自行设计的react项目。）

Answer 1

我有一个非常相似的问题。

我解决问题的方法是在componentDidMount方法中设置一个侦听器，然后在componentWillUnmount中取消设置它。

我不确定您是如何尝试使用监听器的，但是我希望这对您有所帮助。

您的情况：

componentDidMount() {
    this.props.firestore.setListener({collection: 'users'})
}
componentWillUnmount() {
    this.props.firestore.unsetListener({collection: 'users'})
}

如果需要，您可以设置多个侦听器。

添加或删除后Redux Firestore状态未更新

1 个答案: