React 问题：markerArray 状态更新正常，但 arrayLength 状态无法更新

问题根因 #

你遇到的所有更新失效问题，核心是两个基础错误：

1. 没有把状态放在React管理的this.state中，直接挂载到类实例上的普通属性不会触发React的重渲染逻辑
2. 直接修改原数组（调用push）没有生成新的数组引用，React浅比较状态时会认为数组没有变化，直接跳过本次更新，连带arrayLength的赋值也不会生效

修复步骤 #

1. 首先在类组件构造函数中正确初始化状态：

constructor(props) {
  super(props);
  // 所有需要触发重渲染的状态都要放在state中声明
  this.state = {
    markerArray: [],
    arrayLength: 0
  };
}

2. 修正getMarkers逻辑，遵循状态不可变原则，每次更新生成新的数组副本，同时修正ID存在性判断的错误逻辑：

getMarkers = () => {
  this.dbRef.get().then((snapshot) => {
    // 拷贝原有数组生成新引用，不直接修改原状态
    const newMarkerArray = [...this.state.markerArray];
    snapshot.docs.forEach((marker) => {
      const currentID = marker.id;
      // 修正判断逻辑：数组中存储的是对象，要遍历匹配id属性
      const idExisted = newMarkerArray.some(item => item.id === currentID);
      if (!idExisted) {
        newMarkerArray.push({
          ...marker.data(),
          id: currentID
        });
      }
    });
    // 同一次setState调用更新两个状态，保证数据同步
    this.setState({
      markerArray: newMarkerArray,
      arrayLength: newMarkerArray.length
    });
    return newMarkerArray;
  });
};

补充说明 #

你之前尝试设置固定值都无法更新arrayLength，是因为React对状态做浅比较时发现markerArray引用和之前完全一致，就判定本次setState没有变更，直接跳过了整个更新流程，和setState异步特性没有关系。

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