不会使用Firebase firestore onsnapshot实时更新来更新react router渲染方法中的props值

问题描述

const [documents,setDocuments] = useState()

useEffect(()=>{     
    const unsubscribe = firebase
      .firestore()
      .collection('Documents')
      .onSnapshot((snapshot)=>{
        const myDocuments = snapshot.docs.map((doc) => ({
          id : doc.id,...doc.data()
        }))
        setDocuments(myDocuments)
      })

      return () =>unsubscribe()
  },[])

if(documents)
  return (
    <div >
      <Switch>
        <Route exact path="/" render={(props) => <Dashboard {...props} documents={documents} />}  />
      </Switch>
    </div>
  )
  else return <Spinner/>

当“文档”集合中发生更改时（例如，添加了新文档或更新了现有文档的字段），“文档”将更新为新状态。但是在仪表板中，传递到道具的文档仍然是先前的文档值，没有新的更改。我以为“信息中心”会自动接收文档的props值，但不会。

 <Route exact path="/"component={()=><ViewDocumentTable documents={documents} />} />

如果我以此方式编写代码，它将始终接收最新的更新的props值。但是，我知道这不是一个好的解决方案，因为这会导致现有组件的卸载和新组件的安装，而不仅仅是更新现有组件。性能会受到很大影响。

有人可以告诉我如何始终通过React Router中的道具获取更新的值吗？

解决方法

尝试一下

<Route exact path="/" component = {() => <Dashboard documents={documents}} />

,

我自己弄清楚了。实际上它正在工作。由于我自己的愚蠢错误，它在我的情况下不起作用。谢谢所有在这里提供帮助的人。