React子组件调用父组件传入方法时状态陈旧，如何获取最新状态？

问题根源 #

你遇到的是React中闭包捕获旧状态的典型问题：

• playSound函数是在App组件初始渲染时创建的，它捕获了当时的sound值（'beep'）。
• 当子组件调用setSound('honk')后，App组件会重新渲染并创建新的playSound函数，但此时子组件手里拿到的还是之前传递的旧版本playSound，所以调用时依然输出旧的状态值。
• 而App内监听按键调用的是重新渲染后生成的新playSound，自然能拿到最新的'honk'。

解决方法 #

方法1：用useCallback绑定函数依赖，更新函数引用

在App.js中，用useCallback包裹playSound，把sound作为依赖项，这样当sound变化时，会生成新的函数实例传递给子组件：

import { useState, useCallback } from 'react';

const [sound, setSound] = useState('beep');
const playSound = useCallback(() => {
    console.log(sound);
}, [sound]); // 依赖sound，状态更新时重新生成函数

return (
    <Childcomponent
        sound={sound}
        setSound={setSound}
        playSound={playSound}
    />
);

如果子组件是函数组件，建议用React.memo包裹，避免因playSound引用变化导致的不必要重渲染：

const Childcomponent = React.memo((props) => {
    // 子组件逻辑
});

方法2：用useRef保存最新状态，绕过闭包限制

在App.js中用ref实时同步最新的sound值，这样playSound不需要依赖sound，始终能拿到最新状态：

import { useState, useRef, useEffect } from 'react';

const [sound, setSound] = useState('beep');
const soundRef = useRef(sound);

// 状态更新时同步ref
useEffect(() => {
    soundRef.current = sound;
}, [sound]);

function playSound() {
    console.log(soundRef.current); // 直接取ref的最新值
}

return (
    <Childcomponent
        sound={sound}
        setSound={setSound}
        playSound={playSound}
    />
);

方法3：调用时直接传递最新状态值

修改playSound让它接收参数，子组件调用时直接传入当前的sound props：

// App.js
function playSound(currentSound) {
    console.log(currentSound);
}

return (
    <Childcomponent
        sound={sound}
        setSound={setSound}
        playSound={playSound}
    />
);

// ChildComponent.jsx
// 按钮点击时调用
props.playSound(props.sound);

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