React中如何判断全部state为1来动态设置按钮的className？

你可以直接用JavaScript数组内置的every()方法实现需求，该方法只有在数组所有元素都满足指定判断条件时才返回true，刚好匹配你要的「所有state为1才激活按钮」的逻辑。

实现步骤 #

首先假设你存储词汇状态的state结构如下（和你从MySQL拿到的格式对应）：

// 示例state结构，可根据你的实际写法调整
const [wordMemorizeStates, setWordMemorizeStates] = useState([
  { id: 1, memorize: 0 },
  { id: 2, memorize: 0 },
  { id: 3, memorize: 0 },
  // 剩余词汇条目
])

方案1：直接内联动态计算（更推荐，无需额外状态维护） #

不需要单独用useEffect维护按钮类名，直接在渲染按钮时判断即可：

<button
  // 所有条目memorize值为1时用active类，否则用notActive类
  className={wordMemorizeStates.every(item => item.memorize === 1) ? active : notActive}
  // 可选：同步添加原生禁用属性，避免样式失效时误点
  disabled={!wordMemorizeStates.every(item => item.memorize === 1)}
>
  完成
</button>

方案2：按你预期的useEffect写法实现 #

如果需要单独维护按钮类名变量，可以这么写：

// 初始化按钮类为未激活
const [buttonClassName, setButtonClassName] = useState(notActive)

useEffect(() => {
  const isAllMemorized = wordMemorizeStates.every(item => item.memorize === 1)
  setButtonClassName(isAllMemorized ? active : notActive)
// 依赖项设为词汇状态数组，每次勾选更新状态后自动重新判断
}, [wordMemorizeStates])

特殊情况：如果你的state是键值对对象 #

如果你的state没有存为数组，而是{1:0, 2:0, 3:1}这类键为词汇id、值为memorize状态的对象，可以先取对象的值再判断：

const isAllMemorized = Object.values(wordMemorizeStates).every(value => value === 1)

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