React状态更新异常：点击按钮清空状态后输入框值未同步更新的问题

问题描述 #

我遇到了一个React状态同步的奇怪问题：

• 页面初始加载时，输入框和下方文本都正确显示Nickname的初始值Testing
• 在输入框输入内容时，状态能同步更新，输入框和文本都能实时显示新值
• 但点击「Add」按钮把状态设为空对象后，下方文本正确消失了，可输入框里的值却依然保留着之前的内容

我的代码如下：

import { useState } from "react";

const Testing = () => {
    const [testa, setTesta] = useState({ Nickname: "Testing" });
    
    return (
        <>
            <button type="button" onClick={(e) => setTesta({})}>Add</button>
            <input type="text" value={testa?.Nickname} onChange={e => setTesta({ Nickname: e.target.value })} />
            <p>Output: {testa?.Nickname}</p>
        </>
    );
};
export default Testing;

问题原因 #

这个差异的核心在于React对受控组件value属性为undefined的处理逻辑：
当你点击按钮调用setTesta({})后，testa变成了空对象，此时testa?.Nickname的结果是undefined。对于<input>元素来说，如果value被设置为undefined，React会将这个输入框视为「非受控组件」——也就是不再强制把状态值同步到DOM上，输入框会保留当前的DOM节点值（也就是你之前输入的内容）。

而下方的<p>标签直接渲染testa?.Nickname，当它是undefined时，React会渲染空内容，所以文本会消失，这就造成了输入框和文本显示不一致的情况。

解决方案 #

有几种简单的办法可以解决这个问题，核心思路都是保证输入框的value始终是一个字符串（哪怕是空字符串），避免出现undefined：

1. 清空状态时显式设置Nickname为空字符串
   修改按钮的点击事件，把状态设为包含空字符串Nickname的对象：

   <button type="button" onClick={(e) => setTesta({ Nickname: "" })}>Add</button>
   

   这样testa?.Nickname会变成空字符串，输入框的value会被同步设置为空，自然就清空了。

2. 给输入框的value添加兜底的空字符串
   在value属性中用||运算符兜底，当testa?.Nickname为undefined时自动转为空字符串：

   <input type="text" value={testa?.Nickname || ""} onChange={e => setTesta({ Nickname: e.target.value })} />
   

   这种方式不需要修改状态更新逻辑，直接在渲染层处理undefined的情况。

3. 保持状态结构的一致性
   始终让状态对象包含Nickname字段，避免出现属性缺失的情况：

   // 清空时基于之前的状态更新，只修改Nickname字段
   <button type="button" onClick={(e) => setTesta(prevState => ({ ...prevState, Nickname: "" }))}>Add</button>
   

   这种写法能保证状态结构始终一致，减少因属性缺失导致的意外问题。

备注：内容来源于stack exchange，提问作者Jives