React Native中componentDidMount更新数组DataGameArr状态不生效如何解决

问题根因 #

你的代码存在3个核心错误导致状态无法正常更新：

• 你使用Firebase的.on()方法绑定实时数据监听属于异步回调逻辑，你把setState写在了监听回调的外面，回调还没执行拉取数据时，setState就已经先执行了，此时arrData还是空数组
• 监听路径里的email.key没有加this.props前缀，作用域访问错误，无法正确拉取对应节点数据
• 前面的.once('value')拉取到的data完全没有被使用，属于冗余逻辑

修复后代码 #

componentDidMount = async () => {
  const gameRef = firebase
    .database()
    .ref("GamesData")
    .child(this.props.email.key);
  
  // 绑定实时监听，数据变更时自动触发回调更新状态
  gameRef.orderByChild("PlayDate").on("value", (snapshot1) => {
    const arrData = [];
    snapshot1.forEach((childSnapshot) => {
      arrData.push({ 
        x: childSnapshot.val().PlayDate, 
        y: childSnapshot.val().countPlay 
      })
    })
    // 回调内部拿到完整数据后再更新状态
    this.setState({ DataGameArr: arrData });
  });
};

// 组件卸载时解绑监听，避免内存泄漏
componentWillUnmount() {
  firebase
    .database()
    .ref("GamesData")
    .child(this.props.email.key)
    .off("value");
}

修复后打开页面就会自动拉取最新数据更新DataGameArr状态，后续Firebase对应节点数据发生变化时也会自动同步更新，不需要重启应用。

内容的提问来源于stack exchange，提问作者user123456