React JSX中使用onChange触发null读取错误的技术求助

将联系表单集成到大型React项目时，输入内容立即报错。该表单单独用JS编写时运行正常，但在JSX环境中一输入就提示对应字段为null，无法获取输入内容。

相关代码片段 #

状态定义与事件处理函数：

const [mailerState, setMailerState] = useState({
    name: "",
    email: "",
    message: "",
  });

const captchaRef = useRef(null);
  
function handleStateChange(e) {
    setMailerState((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value, // 错误指向此处
    }));
    console.log(mailerState);
}

输入框组件代码：

<input
    placeholder="Name"
    onChange={handleStateChange}
    name="name"
    value={mailerState.name}
/>

错误信息 #

Uncaught TypeError: Cannot read properties of null (reading 'name')
    at Kontakt.jsx:22:1
    at basicStateReducer (react-dom.development.js:15013:1)
    at updateReducer (react-dom.development.js:15135:1)
    at updateState (react-dom.development.js:15237:1)
    at Object.useState (react-dom.development.js:15949:1)
    at useState (react.development.js:1497:1)
    at Kontakt (Kontakt.jsx:11:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at updateFunctionComponent (react-dom.development.js:17034:1)
    at beginWork (react-dom.development.js:18610:1)

已尝试改用onBlur触发事件，问题依旧。目前正在学习JSX细节，寻求解决指导。

解决方案 #

方法1：提前解构事件目标属性 #

在调用setState前，先提取e.target的name和value并保存，避免事件被回收后无法访问：

function handleStateChange(e) {
    const { name, value } = e.target;
    setMailerState((prevState) => ({
      ...prevState,
      [name]: value,
    }));
    // 注意：setState是异步操作，此处打印mailerState会显示更新前的旧值，若需查看更新后的值可通过useEffect监听
}

方法2：使用e.persist()保留事件引用 #

调用e.persist()可将事件对象从React的事件池中移除，避免其属性被清空：

function handleStateChange(e) {
    e.persist();
    setMailerState((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
}

原因说明 #

React的合成事件采用事件池机制复用事件对象，事件处理函数执行完毕后，事件对象的属性会被重置并放回池内。而setState的回调是异步执行的，此时事件对象已被回收，e.target变为null，因此触发Cannot read properties of null错误。上述两种方法均可规避该问题。

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