React函数组件中setState状态未更新及结果数据不展示问题求助

核心问题 #

1. resultData是普通变量，而非React状态：组件每次渲染时都会重新初始化let resultData = {}，即便onSubmit中赋值，组件因setResultVisibility触发重新渲染后，resultData会被重置为空对象，导致结果组件拿到空值。
2. 闭包捕获旧值：onSubmit未做依赖处理，可能捕获到初始的inputData空值，导致赋值时读取的不是最新输入。

修复代码 #

export default function MyContainer() {
    const [inputData, setInputData] = React.useState({
        name1: "",
        name2: "",
        ans: ""
    });
    // 将resultData改为React状态
    const [resultData, setResultData] = React.useState({});
    const [resultVisibility, setResultVisibility] = React.useState(false);

    function handleChange(event) {
        // 补充inputData的正确更新逻辑
        const { name, value } = event.target;
        setInputData(prev => ({ ...prev, [name]: value }));
    }

    // 用useCallback包裹onSubmit，确保捕获最新的inputData
    const onSubmit = React.useCallback(() => {
        setResultData({
            name1: inputData.name1,
            name2: inputData.name2,
            result: 50
        });
        setResultVisibility(true);
    }, [inputData]);

    return (
        <div>
            <MyInputComponent
                name1={inputData.name1}
                name2={inputData.name2}
                ans={inputData.ans}
                onSubmit={onSubmit}
                onChange={handleChange}
            />
            {resultVisibility && <MyResultComponent
                name1={resultData.name1}
                name2={resultData.name2}
                result={resultData.result}
            />}
        </div>
    );
}

关键修改说明 #

• 把resultData转为状态：React仅会追踪状态变量的变化，状态更新后会触发组件重新渲染，确保结果组件能获取到最新的计算值。
• 用useCallback包裹onSubmit：绑定inputData为依赖，确保每次inputData更新时，onSubmit能捕获到最新的输入值，避免闭包导致的旧值问题。
• 补充handleChange逻辑：确保用户输入能正确同步到inputData状态中（原代码中该函数未实现，需补充此部分）。

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