PrimeReact InputText输入触发TypeError: e.target为null问题排查

首先可以明确说，这不是PrimeReact的Bug，问题出在你处理setState的方式上，尤其是文本输入框的写法违反了React的状态不可变性原则，还写错了函数式更新的返回值。

先看你的错误写法 #

你在文本输入框的onChange里写了：

this.setState(state => (state.selectedEntity.firstName = e.target.value))

这里有两个关键问题：

1. 直接修改了state对象（状态突变）：React要求状态是不可变的，你不能直接修改state.selectedEntity，必须返回一个新的对象来替换它。
2. 函数式更新返回的是属性值而非新状态对象：setState的函数式更新期望你返回一个新的状态片段（比如{ selectedEntity: ... }），但你这里返回的是e.target.value这个字符串——React会尝试把这个字符串合并到状态里，直接破坏了你的状态结构，这才导致后续出现e.target is null的报错。

为什么下拉框和复选框看似正常？ #

其实它们的写法也是错误的！只是因为PrimeReact的Dropdown和Checkbox的事件对象处理逻辑，暂时没触发明显报错，但这种直接修改state的方式早晚会出问题——比如组件不重新渲染、状态更新滞后，或者在复杂场景下出现奇怪的bug。本质上它们的setState写法同样违反了不可变性原则。

正确的写法 #

不管是文本输入框、下拉框还是复选框，都应该遵循React的状态更新规则，用不可变的方式更新嵌套状态：

对于文本输入框：

this.setState(state => ({
  ...state, // 保留原状态的其他属性
  selectedEntity: {
    ...state.selectedEntity, // 保留selectedEntity的其他属性
    firstName: e.target.value // 修改目标属性
  }
}))

对于下拉框：

this.setState(state => ({
  ...state,
  selectedEntity: {
    ...state.selectedEntity,
    gender: e.value
  }
}))

对于复选框：

this.setState(state => ({
  ...state,
  selectedEntity: {
    ...state.selectedEntity,
    incognito: e.checked
  }
}))

原理说明 #

函数式更新里的state参数是React给你的当前状态快照，你不能直接修改它。我们通过扩展运算符（...）创建新的对象，只修改需要更新的属性，这样既保留了原状态的其他部分，又符合React的不可变性要求，组件就能正确响应状态变化，不会出现奇怪的报错。

你可以把这些修正应用到你的测试案例里，就能解决e.target is null的问题了。

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