React Text Field输入内容无法显示但控制台可打印，是什么问题？

问题原因 #

你当前采用React受控组件模式实现表单，输入框的显示值与getData.name严格绑定，你仅在updateData函数中打印了构造后的新状态对象，没有调用setgetData触发状态更新，state始终为初始空值，因此输入内容无法回显到输入框中。

修复方案 #

• 修改updateData函数，调用状态更新方法写入新值：

const updateData = (e) => {
    const updatedData = {...getData,[e.target.name]:e.target.value};
    console.log(updatedData);
    // 新增状态更新逻辑
    setgetData(updatedData);
}

• 若存在更新依赖旧状态、闭包风险的场景，推荐使用函数式更新写法保证状态准确性：

const updateData = (e) => {
    const field = e.target.name;
    const value = e.target.value;
    setgetData(prev => {
        const newState = {...prev, [field]: value};
        console.log(newState);
        return newState;
    })
}

补充说明 #

该写法支持所有同结构表单字段复用，只需给其他输入框设置与state字段对应的name属性即可，无需单独编写每个字段的change回调。

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