React Native 运行一种方法，通过监听另一个状态来更新一个状态

Question

我试图在特定状态发生变化时运行一个方法。但是我得到“达到最大更新深度”。这是没有意义的，因为该函数将监听从 stateA 到更新 stateB 的更改。我尝试过做类似

setState(prev => {...prev, new})

的事情。但是，我需要做的不仅仅是将新数据连接到以前的数据。

这是我需要运行的函数

const _updateGraph = (_state: { x: any; y: any; z: any; }) => {
  let X = parseFloat("" + _state.x.toFixed(3));
  let Y = parseFloat("" + _state.y.toFixed(3));
  let Z = parseFloat("" + _state.z.toFixed(3));
  let counter = graphState.counter;
  let stateDataX: { x: number, y: number }[] = graphState.dataX;
  let stateDataY: { x: number, y: number }[] = graphState.dataY;
  let stateDataZ: { x: number, y: number }[] = graphState.dataZ;

  setGraphState({
    dataX: stateDataX.concat({ x: counter, y: X }),
    dataY: stateDataY.concat({ x: counter, y: Y }),
    dataZ: stateDataZ.concat({ x: counter, y: Z }),
    dataObj: { x: X, y: Y, z: Z },
    counter: counter + 1
  });
};

我试图使用的钩子：

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

useEffect 正在监听 {x, y, z} 的更新以更新 graphState。这怎么会导致无限循环？

我唯一能想到的尝试就是重写更新函数，这样我就可以像

setState(prev => {...prev, new})

那样使用setState

Answer 1

React hook 的依赖项数组使用浅引用相等性检查，并且您在每个渲染周期传递一个新的对象引用，并将

{ x, y, z }

作为依赖项。

console.log({} === {}); // false
console.log({ x: 1, y: 2, z: 3 } === { x: 1, y: 2, z: 3 }); // false

分别将

x

、

y

和

z

作为依赖项传递：

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

或者先用

useMemo

钩子记住对象引用：

const coord3d = React.useMemo(() => ({ x, y, z }), [x, y, z]);

useEffect(() => { 
  _updateGraph(coord3d); 
}, [coord3d]);