React：如何在下一次渲染时执行保存操作？

你遇到的核心问题是useState的更新是异步的，父组件的save方法通过闭包捕获了旧的text状态值，所以在子组件同步调用setText和save时，save会使用未更新的旧值。以下是两种更简洁的优化方案：

方案一：直接传递最新文本值给save方法 #

既然子组件已经拿到了最新的myText，完全可以跳过依赖父组件状态的步骤，直接把最新值传给save方法：

父组件修改： #

const [text, setText] = useState('');
// 让save接受可选的当前文本参数
const save = (currentText) => {
    // 优先使用传入的最新值，没有则用现有状态（兼容其他调用场景）
    const targetText = currentText ?? text;
    makeAPICall(targetText);
};

return <Child initialText={text} setText={setText} save={save} />;

子组件修改： #

handleClick = () => {
    props.setText(myText);
    // 直接把最新的myText传给save
    props.save(myText);
};

这个方案最直接，无需处理状态异步更新的时序问题，代码逻辑清晰，没有额外的状态或副作用。

方案二：用useRef保存最新状态值 #

如果不想修改save的调用方式，可以用useRef来维护最新的文本值，避开闭包陷阱：

父组件修改： #

const [text, setText] = useState('');
// 创建ref同步保存最新的text值
const textRef = useRef(text);

// 每次text更新时同步更新ref
useEffect(() => {
    textRef.current = text;
}, [text]);

const save = () => {
    // 直接使用ref.current获取最新值
    makeAPICall(textRef.current);
};

return <Child initialText={text} setText={setText} save={save} />;

子组件无需修改： #

handleClick = () => {
    props.setText(myText);
    props.save();
};

useRef的值更新是同步的，且不受组件渲染闭包的影响，save方法总能拿到最新的文本值。

为什么临时方案不够优雅？ #

你用saveFlag配合useEffect的方式本质是通过额外状态触发副作用来等待状态更新，但会引入不必要的状态变量，随着业务逻辑复杂，很容易出现状态同步混乱、重复触发等问题。上面的两种方案都不需要额外状态，更符合React的状态管理逻辑。

内容的提问来源于stack exchange，提问作者Joe C.