如何为数组映射迭代渲染的组件单独设置状态？

你当前的问题核心是所有按钮共用了同一个btnText状态变量，所以只要修改这个变量，所有依赖它的按钮文本都会同步变化。要实现单独控制每个按钮的文本，需要给每个按钮维护独立的状态，下面提供两种实用方案：

方案一：父组件统一管理每个按钮的状态 #

通过对象或数组存储每个按钮对应的文本状态，点击时根据按钮ID定位修改：

function App() {
  // 初始化状态，用按钮ID作为键，存储对应文本
  const [btnTexts, setBtnTexts] = useState({
    1: 'Add to cart',
    2: 'Add to cart'
  });

  // 点击事件接收按钮ID，仅修改对应ID的文本
  const handleClick = (btnId) => {
    setBtnTexts(prevState => ({
      ...prevState, // 保留其他按钮的状态
      // 切换当前按钮的文本
      [btnId]: prevState[btnId] === 'Add to cart' ? 'Remove from cart' : 'Add to cart'
    }));
  };

  const renderBtns = () => {
    // 抽离按钮基础数据，避免每次渲染重复创建
    const btnList = [
      { id: 1 },
      { id: 2 }
    ];
    return btnList.map((btn) => (
      // 必须加key，避免React渲染警告
      <button key={btn.id} onClick={() => handleClick(btn.id)}>
        {btnTexts[btn.id]}
      </button>
    ));
  };

  return (
    <div className="App">
      {renderBtns()}
    </div>
  );
}

方案说明 #

• 状态btnTexts是对象结构，每个按钮ID对应独立的文本，确保修改不会影响其他按钮。
• 使用函数式更新（prevState）获取最新状态，避免直接修改导致的状态覆盖问题。
• 渲染时给每个按钮绑定带自身ID的点击事件，精准定位要修改的按钮。

方案二：封装独立子组件 #

把按钮逻辑封装成子组件，每个子组件自行维护状态，父组件只需负责渲染：

// 独立按钮组件
function CartButton() {
  const [btnText, setBtnText] = useState('Add to cart');

  const handleClick = () => {
    setBtnText(prev => prev === 'Add to cart' ? 'Remove from cart' : 'Add to cart');
  };

  return <button onClick={handleClick}>{btnText}</button>;
}

// 父组件
function App() {
  const renderBtns = () => {
    // 根据需要渲染多个按钮组件
    return [1, 2].map(id => <CartButton key={id} />);
  };

  return (
    <div className="App">
      {renderBtns()}
    </div>
  );
}

方案说明 #

• 每个CartButton组件拥有独立的状态，点击时仅修改自身文本，完全不影响其他按钮。
• 父组件无需管理按钮状态，代码更简洁，适合按钮逻辑独立的场景。

方案选择建议 #

• 如果需要在父组件中统一监控或操作所有按钮的状态（比如统计已加入购物车的按钮数量），优先选择方案一。
• 如果每个按钮的逻辑完全独立，不需要父组件干预，优先选择方案二。

内容的提问来源于stack exchange，提问作者one-hand-octopus