React useState报错：Unexpected empty object pattern 问题排查求助

AI 小北

2026-8-12

问题分析与修复

你的代码核心是事件绑定的基础语法错误，和过时语法无关，具体问题及修复方案如下：

1. 导致报错的直接原因

你写的<button onClick={{}} = setMessage("OTHER VALUE")>完全不符合React事件处理规则：

onClick={{}}会被JS解析成空对象解构操作，这就是触发Unexpected empty object pattern no-empty-pattern报错的根源。
直接写setMessage("OTHER VALUE")会让组件一渲染就执行该函数，而非点击按钮时才触发。

2. 正确的事件绑定方式

React的事件属性必须接收函数引用，你可以用两种方式修复：

方式一：箭头函数包裹（适合简单场景）

把状态更新逻辑放在箭头函数内，确保只有点击按钮时才执行setMessage：

import React, { useState } from 'react';
import "./App.css";

const App = () => {
  const [message, setMessage] = useState("INITIAL VALUE");
  
  return (
    <>
      <div id='my_div' className="container">{message}</div>
      <button onClick={() => setMessage("OTHER VALUE")}>
        Click here to change the message.
      </button>
    </>
  );
}
export default App;

方式二：单独定义事件处理函数（适合复杂逻辑）

如果后续需要添加更多点击相关逻辑，推荐把逻辑抽成独立函数：

import React, { useState } from 'react';
import "./App.css";

const App = () => {
  const [message, setMessage] = useState("INITIAL VALUE");

  const handleMessageChange = () => {
    setMessage("OTHER VALUE");
    // 可在此扩展更多复杂逻辑
  }
  
  return (
    <>
      <div id='my_div' className="container">{message}</div>
      <button onClick={handleMessageChange}>
        Click here to change the message.
      </button>
    </>
  );
}
export default App;