React 中 onChange 事件触发多次：深入探讨
在 React 开发中，输入框的 onChange 事件有时会意外触发多次，本文将深入分析此问题，并提供解决方案。
问题描述
一个简单的 React 组件，使用 useState hook 管理状态，并在输入框的 onChange 事件中更新状态并打印。然而，输入一个字符，控制台却打印了两次。这种现象在使用对象类型状态时尤其明显，而使用原始类型状态则不会出现。
示例代码片段 (问题代码):
import React, { useState } from "react";
export default function Child() {
const [state, setState] = useState({});
const onChange = (event) => {
setState({ ...state, value: event.target.value });
console.log("onChange triggered", state);
};
return (
<div>
<input type="text" onChange={onChange} />
</div>
);
}
问题分析
此问题的根源在于 React 的 Strict Mode（严格模式）。在开发环境中，Strict Mode 会执行两次渲染，以帮助开发者发现潜在问题，例如不必要的副作用。
当状态为对象类型时，setState 更新的是对象的引用，而非值本身。Strict Mode 的双重渲染会导致 onChange 事件被调用两次，每次都更新相同的对象引用。 而原始类型状态（如字符串、数字）直接更新值，因此不会出现这个问题。
根本原因
-
对象类型状态的引用更新: 使用对象作为状态时，
setState会创建一个新的对象，但onChange函数内的console.log仍然打印的是旧状态，因为 React 的异步更新机制。第二次渲染时，状态才更新为新值。 - Strict Mode 的双重渲染: 开发环境下的 Strict Mode 触发了双重渲染，加剧了这个问题。
解决方案
避免使用对象类型状态，或者优化 setState 的调用方式：
方法一：使用原始类型状态
将状态改为原始类型，例如字符串：
import React, { useState } from "react";
export default function Child() {
const [inputValue, setInputValue] = useState("");
const onChange = (event) => {
setInputValue(event.target.value);
console.log("onChange triggered", inputValue);
};
return (
<div>
<input type="text" value={inputValue} onChange={onChange} />
</div>
);
}
方法二：使用函数式更新
使用函数式更新 setState，确保每次更新都基于最新的状态：
import React, { useState } from "react";
export default function Child() {
const [state, setState] = useState({});
const onChange = (event) => {
setState((prevState) => ({ ...prevState, value: event.target.value }));
console.log("onChange triggered", state);
};
return (
<div>
<input type="text" onChange={onChange} />
</div>
);
}
通过以上方法，可以有效解决 React 中 onChange 事件触发多次的问题。 记住，生产环境中 Strict Mode 会被禁用，因此这个问题通常只在开发环境中出现。
