React用useState实现按钮背景色随值切换 解决跳转重置问题

你遇到的跳转返回后颜色重置问题，来自几个核心错误：

• 子组件本地存储了和业务数据重复的UI状态。路由跳走时子组件会被完整卸载，内部useState存储的flagC会被完全回收；返回页面时组件重新挂载，useState会重新取初始值赋值，之前存的颜色状态直接丢失。
• 直接修改props上的原始对象违反React单向数据流规则，且可变修改无法被React的状态检测机制捕获，既不会触发重渲染，也无法保证状态同步。
• 初始版本写的两个平行if存在逻辑漏洞：第一个判断分支修改完state值后，第二个分支会直接命中刚修改的新值，等于每次点击都会连续执行两次状态翻转，之前点击能切换颜色纯靠执行顺序巧合。
• 代码里的on/off如果是枚举字符串值必须加引号，否则会被JS引擎识别为未定义变量抛出引用错误。

核心原则：业务状态只存一份，UI派生值不要单独存state，所有车辆状态统一收敛到父组件托管，子组件只负责根据传入的props渲染、触发回调。

父组件（app.js）改造 #

用useState托管车辆数组，提供专门的状态切换方法，禁止子组件直接修改props：

import { useState } from 'react';
import CarButton from './CarButton';

function App() {
  // 状态统一存在父组件，on/off为字符串值要加引号
  const [cars, setCars] = useState([
    {name: 'mazda', state: 'off'},
    {name:'toyota', state:'off'},
    {name: 'volvo', state:'off'}
  ]);

  // 纯函数更新状态，不修改原对象，生成新数组触发React渲染
  const toggleCarState = (targetIndex) => {
    setCars(prevCars => prevCars.map((car, index) => {
      if (index === targetIndex) {
        return {
          ...car,
          state: car.state === 'on' ? 'off' : 'on'
        }
      }
      return car
    }))
  }

  return (
    <div className="car-list">
      {cars.map((car, index) => (
        <CarButton
          key={car.name} // 列表渲染必须加唯一key，优先用业务唯一标识，不要用index
          carName={car.name}
          carState={car.state}
          onToggle={() => toggleCarState(index)}
        />
      ))}
    </div>
  )
}

export default App;

子组件（按钮组件）改造 #

删除子组件内独立维护的flagC状态，按钮背景色直接从传入的carState派生，不需要单独存储：

function CarButton(props) {
  // 直接从props计算样式，不存重复状态，组件重挂载时会自动取最新props计算
  const bgColor = props.carState === 'on' ? 'green' : 'red';

  return (
    <button 
      style={{backgroundColor: bgColor}} 
      onClick={props.onToggle}
    >
      {props.carName}
    </button>
  )
}

export default CarButton;

• 车辆状态作为唯一数据源存在父组件的托管state中，只要父组件不被销毁，路由跳转返回后状态不会丢失，子组件挂载时会直接读取最新的车辆状态计算颜色，从根源上避免UI和数据不同步的问题。
• 所有状态修改走React官方的setState更新流程，每次更新生成不可变的新状态引用，React可以正确检测变化触发重渲染，不会出现数据改了UI不更新的问题。
• 子组件不维护冗余的派生状态，彻底消除了多份状态生命周期不一致导致的不同步bug。

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