React Native：onPress事件中状态更新后立即调用函数失效问题

React（包括React Native）的状态更新是异步批量处理的，调用setSubtractArr之后，props.subtractArr不会立刻变成最新值，这就是直接传它给endFunction拿不到更新后数据的原因。下面给你几个实用的解决方法：

方法一：提前计算新值，直接复用 #

既然你已经能通过prev计算出新的状态值，不如先把这个值存成变量，既用来更新状态，又传给endFunction：

const handlePress = () => {
  // 先算出要更新的新值
  const newSubtractArr = props.subtractArr + (props.workoutInfo.reps * props.workoutInfo.interval / 1000);
  
  // 更新状态
  props.setSubtractArr(newSubtractArr);
  
  // 直接用提前算好的新值调用函数
  endFunction(newSubtractArr);
};

这个方法最简单直接，适合没有其他地方同时修改subtractArr的场景，能保证传给endFunction的就是最新值。

方法二：在函数式更新里调用endFunction #

如果担心有其他地方同时更新subtractArr，用函数式更新获取最新的prev状态计算新值，然后在回调里直接调用endFunction：

const handlePress = () => {
  props.setSubtractArr(prev => {
    const newSubtractArr = prev + (props.workoutInfo.reps * props.workoutInfo.interval / 1000);
    // 这里拿到的newSubtractArr是绝对最新的，直接调用函数
    endFunction(newSubtractArr);
    return newSubtractArr;
  });
};

这种方式能确保基于最新的状态计算新值，同时立刻把新值传给endFunction，不会有异步延迟的问题。

方法三：用useEffect监听状态变化 #

如果不想把endFunction和状态更新耦合在一起，可以用useEffect监听props.subtractArr的变化，当它更新时再调用函数：

import { useState, useEffect } from 'react';

// 加个状态标记，确保只有点击时才触发endFunction
const [triggerEnd, setTriggerEnd] = useState(false);

const handlePress = () => {
  props.setSubtractArr(prev => prev + (props.workoutInfo.reps * props.workoutInfo.interval / 1000));
  setTriggerEnd(true);
};

// 监听subtractArr和triggerEnd的变化
useEffect(() => {
  if (triggerEnd) {
    endFunction(props.subtractArr);
    setTriggerEnd(false); // 重置标记，避免重复触发
  }
}, [props.subtractArr, triggerEnd]);

这个方法适合需要在状态更新后执行多个副作用的场景，把状态更新和业务逻辑分开，代码更清晰。

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