React Native：如何在interval函数中访问多个更新后的状态？

问题根源 #

你的tick函数通过useCallback创建时依赖数组为空，导致它捕获的是组件首次渲染时的countUp值（初始为true）。后续点击按钮切换countUp后，tick不会重新生成，定时器里的tick始终使用旧的countUp，所以计数器方向不会变化。

最优解决：用 useRef 跟踪最新状态 #

useRef的current属性可以实时更新且不触发重渲染，非常适合用来保存需要在定时器中访问的状态变量，这样无需重启定时器就能拿到最新值。

修改后的完整代码：

import React, { useState, useCallback, useEffect, useRef } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

function App(){
  const [counter, setCounter] = useState(0);
  const [countUp, setCountUp] = useState(true);
  
  // 用ref存储最新的countUp值
  const countUpRef = useRef(countUp);
  
  // 状态更新时同步到ref
  useEffect(() => {
    countUpRef.current = countUp;
  }, [countUp]);

  const tick = useCallback(()=> {
    // 从ref中读取最新的countUp
    setCounter(prev => prev + (countUpRef.current ? 1 : -1));
  },[]);

  useEffect(()=> {
    const intervalID = setInterval(tick, 1000);
    return () => clearInterval(intervalID);
  },[]);

  return(
    <View style={styles.main}>
      <Text>{counter}</Text>
      <Button title='switch' onPress={() => setCountUp(!countUp)}/>
    </View>
  );
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    flexDirection: 'column',
    height: '100%',
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
});

export default App;

多状态场景适配 #

如果实际项目中有数十个类似countUp的状态，可以用一个对象ref统一管理：

// 初始化状态ref
const stateRef = useRef({
  countUp: true,
  // 其他需要跟踪的状态...
});

// 同步所有状态到ref
useEffect(() => {
  stateRef.current = {
    ...stateRef.current,
    countUp,
    // 其他状态变量...
  };
}, [countUp /* 所有需要同步的状态依赖 */]);

之后在tick里直接通过stateRef.current.countUp、stateRef.current.xxx获取最新状态即可，全程不需要重启定时器。

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