ReactJS中点击按钮后三元运算不生效，无法切换播放/暂停状态？

问题根因 #

你代码中的isOn是被硬编码初始值为true的普通常量，不属于React的响应式状态范畴。普通变量的值发生变化时不会触发组件重渲染，因此界面不会同步更新。你手动修改初始值能看到按钮切换，是因为修改后组件重新初始化加载，而运行时点击事件修改普通变量不会触发界面刷新。

修复方案 #

步骤1：将isOn改为响应式状态 #

如果你使用的是React函数组件，用useState管理isOn的状态：

import { useState } from 'react';

// 组件内部代码
const [isOn, setIsOn] = useState(true);

步骤2：在点击事件中更新状态 #

在startMe和stopMe函数中调用状态更新方法触发重渲染：

const startMe = () => {
  // 保留你原有播放逻辑
  setIsOn(true);
};

const stopMe = () => {
  // 保留你原有暂停逻辑
  setIsOn(false);
};

可选补充：处理表单默认行为 #

你当前的按钮type设为了submit，如果外层包裹了form元素，点击会触发表单默认提交行为导致页面刷新，状态更新会失效。可以在事件函数中阻止默认行为：

const startMe = (e) => {
  e.preventDefault();
  setIsOn(true);
  // 其他播放逻辑
};

const stopMe = (e) => {
  e.preventDefault();
  setIsOn(false);
  // 其他暂停逻辑
};

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