React项目如何用useEffect实现红绿切换按钮及点击计数，能否不用布尔值实现切换

云上老周

2026-9-26

React useEffect 切换状态&计数实现方案

基础实现（符合useEffect使用要求）

首先修正原代码的类型错误、逻辑割裂问题，通过useEffect监听状态变化实现计数：

import { useState, useEffect } from 'react';

function App() {
  const [currentStatus, setCurrentStatus] = useState('Green');
  const [counter, setCounter] = useState(0);

  // 切换状态逻辑
  const toggleStatus = () => {
    setCurrentStatus(prevStatus => prevStatus === 'Green' ? 'Red' : 'Green');
  };

  // 监听状态变化，每次切换触发计数+1
  useEffect(() => {
    setCounter(prevCount => prevCount + 1);
  }, [currentStatus]);

  return (
    <div>
      <h1 style={{ color: currentStatus.toLowerCase() }}>{currentStatus}</h1>
      <button onClick={toggleStatus}>Toggle status</button>
      <h3>总点击次数：{counter}</h3>
    </div>
  );
};

注：这里使用函数式更新状态，是为了避免闭包导致的状态更新异常，符合React官方推荐写法

非布尔值实现切换的方案

完全可以不使用布尔值实现切换，以下两种是常用方案：

索引循环切换方案：适合后续需要扩展更多状态的场景，只需修改状态列表即可，不需要改动切换逻辑

const STATUS_OPTIONS = ['Green', 'Red'];
const [statusIndex, setStatusIndex] = useState(0);
const [counter, setCounter] = useState(0);

const toggleStatus = () => {
  // 取模运算实现循环切换，支持任意数量的状态
  setStatusIndex(prev => (prev + 1) % STATUS_OPTIONS.length);
};

useEffect(() => {
  setCounter(prev => prev + 1);
}, [statusIndex]);

// 渲染时取值：STATUS_OPTIONS[statusIndex]