React中用useState实现按钮切换开关遇语法错误求助

你的代码存在两个关键语法/逻辑错误：

1. 按钮标签闭合错误：你使用了自闭合标签/>，但按钮内部包含子元素，必须用完整的<button>...</button>标签结构闭合。
2. 按钮内容逻辑错误：你在JSX渲染内容里调用console.log，它的返回值是undefined，导致按钮上不会显示任何文字，应该直接返回要展示的状态文本。

修正后的完整代码示例：

import React from 'react';

function ToggleButton() {
  const [isON, setIsON] = React.useState(true);

  return (
    <button onClick={() => setIsON(!isON)}>
      {isON ? 'ON' : 'OFF'}
    </button>
  );
}

export default ToggleButton;

额外说明 #

如果需要在状态切换时打印日志，应该把console.log放在点击事件的回调函数里，而非JSX的渲染内容中：

<button onClick={() => {
  setIsON(!isON);
  console.log(isON ? '即将切换为OFF' : '即将切换为ON');
}}>
  {isON ? 'ON' : 'OFF'}
</button>

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