React.js：如何实现选车按钮的独立状态切换

你的代码里几个核心问题导致了所有按钮状态同步：

• 硬编码的isBenzSelected/isJeepSelected全局传给所有Item，导致所有按钮的文本判断都依赖这两个变量
• Item组件里直接修改全局cars数组，不符合React状态管理规范
• 按钮文本判断同时用到组件自身的toggle状态和全局变量，逻辑混乱

正确的做法是把汽车的选中状态统一放在父组件管理，每个Item只负责展示和触发状态切换：

修改后的完整代码 #

import { useState } from "react";

// 初始汽车数据
const initialCars = [
  { name: "Benz", selected: false },
  { name: "Jeep", selected: false },
  { name: "BMW", selected: false }
];

export default function App() {
  // 把汽车列表放到组件状态中，统一管理选中状态
  const [cars, setCars] = useState(initialCars);

  // 切换指定车型的选中状态
  const handleToggleCar = (carName) => {
    setCars(prevCars => 
      prevCars.map(car => 
        car.name === carName ? {...car, selected: !car.selected} : car
      )
    );
  };

  return (
    <div className="App">
      {cars.map((car, index) => (
        <div key={index}>
          <Item 
            name={car.name} 
            selected={car.selected} 
            onToggle={() => handleToggleCar(car.name)} 
          />
        </div>
      ))}
    </div>
  );
}

const Item = ({ name, selected, onToggle }) => {
  return (
    <>
      <span>{name}</span>
      <span>
        <button onClick={onToggle}>
          {selected ? "Remove" : "Add"}
        </button>
      </span>
    </>
  );
};

关键改动说明 #

• 用useState管理汽车列表的选中状态，确保状态更新能触发组件重新渲染
• 父组件提供handleToggleCar回调，负责修改对应车型的选中状态，避免子组件直接修改全局数据
• 每个Item组件只接收当前车型的selected状态和切换回调，按钮文本完全依赖自身的selected值，实现独立状态切换
• 移除了子组件里多余的toggle状态和直接修改全局数组的代码，符合React单向数据流的原则

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