React Native监听状态更新另一状态触发无限循环问题咨询

问题原因 #

• useEffect依赖数组错误：你将[{x,y,z}]作为依赖项，组件每次渲染都会生成新的对象引用，React对依赖的浅比较会判定每次都有变化，导致useEffect反复执行。
• 状态更新依赖当前state的闭包问题：_updateGraph直接读取当前graphState的值，若useEffect频繁触发，会反复更新状态，加上组件重新渲染后依赖再次变化，形成无限循环。

修复方案 #

1. 修正useEffect的依赖数组 #

放弃用对象字面量作为依赖，直接将x、y、z作为独立依赖项，只有当这三个值实际改变时才触发useEffect：

useEffect(() => { 
  _updateGraph({ x, y, z }); 
}, [x, y, z]);

2. 用函数式更新重写_updateGraph #

通过setState的函数参数获取最新的prevState，避免直接依赖当前graphState，确保每次更新都基于最新状态：

const _updateGraph = (_state: { x: any; y: any; z: any; }) => {
  const X = parseFloat("" + _state.x.toFixed(3));
  const Y = parseFloat("" + _state.y.toFixed(3));
  const Z = parseFloat("" + _state.z.toFixed(3));

  setGraphState(prev => ({
    dataX: prev.dataX.concat({ x: prev.counter, y: X }),
    dataY: prev.dataY.concat({ x: prev.counter, y: Y }),
    dataZ: prev.dataZ.concat({ x: prev.counter, y: Z }),
    dataObj: { x: X, y: Y, z: Z },
    counter: prev.counter + 1
  }));
};

效果说明 #

修改后，只有x、y、z任意一个值发生变化时，才会触发状态更新；同时函数式更新避免了闭包导致的状态过期问题，彻底终止无限循环。

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