React调用API时TextField的defaultValue为何不显示内容？

核心问题 #

你遇到的是React受控组件与非受控组件的典型问题：

• 用defaultValue时内容不显示，大概率是因为thing.thingLastName在组件首次渲染时还未被正确初始化（比如异步加载数据导致初始值为undefined/null），而defaultValue仅在组件第一次渲染时赋值，后续数据更新不会同步。
• 改成value后无法编辑，是因为你绑定的value是thing.thingLastName，但onChange里更新的却是另一个状态first，状态与输入框值完全脱节，输入时状态没同步更新，导致输入框内容锁死。

修正方案 #

1. 切换为受控组件（推荐）

定义一个与输入框对应的状态变量，将value和onChange与该状态绑定：

// 先在组件内定义状态，用thing.thingLastName初始化
const [lastName, setLastName] = useState(thing.thingLastName);

// 然后渲染TextField
<TextField
  size="small"
  className="typing-container"
  value={lastName}
  label="Last Name"
  onChange={(event) => setLastName(event.target.value)}
  required
/>

2. 解决defaultValue不显示的问题（非受控场景）

如果坚持用非受控组件，需要确保thing.thingLastName有值时再渲染TextField：

{thing.thingLastName && (
  <TextField
    size="small"
    className="typing-container"
    defaultValue={thing.thingLastName}
    label="Last Name"
    required
  />
)}

补充说明 #

• 受控组件：输入框的值完全由React状态控制，每次输入都会触发状态更新，是React表单的推荐写法。
• 非受控组件：输入框的值由DOM自身管理，defaultValue仅做初始赋值，适合不需要实时同步状态的简单场景。

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