为何React对象状态更新重渲染时{player.firstName}未消失？

先看你提到的错误代码里handleLastNameChange的实现：

function handleLastNameChange(e) {
  setPlayer({
    lastName: e.target.value
  });
}

这里调用setPlayer时只传了新的lastName属性，没有展开原有的player对象，所以更新后的player状态只包含lastName，firstName和score都会从状态中丢失（变为undefined）。

你疑惑的{player.firstName}没消失其实是视觉误解：

• 页面<p>标签里的{player.firstName}因为是undefined，在JSX中会被渲染为空字符串，实际上已经“消失”了；
• 而firstName对应的输入框还显示之前的内容，是因为当input的value为undefined时，React会把这个受控组件转为非受控组件，输入框会保留用户之前输入的内容，但这并不代表状态里还有firstName。

至于{player.score}看起来“消失”，是因为score对应的输入框value是Number(e.target.value)，当状态里的score变为undefined时，输入框的value是undefined，此时输入框会显示为空，和页面<p>标签里的表现一致。

正确的写法是更新对象时展开原状态，保留其他属性：

function handleLastNameChange(e) {
  setPlayer({
    ...player, // 展开原对象，保留firstName和score
    lastName: e.target.value
  });
}

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