当firebase更新时，React组件不会更新

作者: 日耀九洲
发布时间: 2024-01-21 08:39:16 (5月前)
转自：

2 条回复

0#
回复此人
LOGO | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 当您的组件首次安装时，它会调用ComponentDidMount并初始化 <code> peopleArray </code> 。这只执行一次，因此每次从Firebase接收更新时，此阵列都会发生变异。使用当前的实现，您将状态变为引用 <code> peopleArray </code> 被保持在状态作为指针，而不是价值。 React在检查状态树中是否有变化时，不会进行深度比较，它会进行对象比较。这就是为什么你永远不想改变你的状态，总是在设置状态时创建新对象。这也适用于redux。 </p> <P> 一个超级快速的解决方案是移动线 <code> let peopleArray = [] </code> 进入firebase onValue处理程序，以便每次获得更新时都会创建一个新数组。此外，使用当前实现，您将继续将Firebase值附加到同一个数组上，因此您可能会获得重复项。我提到的修复也将照顾到这一点。 </p> <P> 这是你的最终CDM： </p> <pre> <code> componentDidMount() { this.dbroot = firebase.database().ref().child('io') this.dbroot.on('value', snapshot => { let peopleArray = [] snapshot.forEach((snap) => { if(snap.val().active === true) { peopleArray.push(snap.val()) } }) this.setState({people: peopleArray}) }); } </code> </pre> </DIV>

编辑

登录后才能参与评论