如何在useEffect中调用含target.value状态变更的函数？解决target未定义报错

错误原因 #

你碰到的Cannot read properties of undefined (reading 'target')错误，本质是在useEffect里调用handleChangeTitle()时没传事件参数——函数里的e是undefined，自然没法访问e.target。另外原代码里useEffect依赖title，如果在里面更新title还会触发无限循环，这也是需要注意的问题。

解决方案 #

1. 直接调用setTitle更新（推荐）

如果只是要在useEffect里更新title状态，完全没必要绕handleChangeTitle，直接用setTitle传目标值就行：

const [title, setTitle] = useState("");

const handleChangeTitle = (e) => {
  setTitle(e.target.value);
};

useEffect(() => {
  // 示例：组件挂载时设置默认标题
  setTitle("初始默认标题");
}, []); // 空数组表示仅在组件挂载时执行一次

return (
  <div className="App">
    <input
      name="title"
      type="text"
      value={title}
      onChange={handleChangeTitle}
    />
    <p>{title}</p>
  </div>
);

2. 必须用handleChangeTitle？模拟事件对象传入

如果业务场景要求必须通过这个函数更新，手动构造一个包含target.value的对象作为参数传入即可：

useEffect(() => {
  // 构造符合函数预期的参数结构
  handleChangeTitle({ target: { value: "通过useEffect设置的标题" } });
}, []);

3. 避免无限循环

原代码中useEffect的依赖项是title，如果在useEffect里更新title，会触发useEffect反复执行，形成无限循环。请根据实际需求调整依赖项：

• 仅组件挂载时执行：用空数组[]
• 依赖特定变量更新：把该变量加入依赖数组

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