React中如何仅修改map渲染的单个元素状态？

你当前的问题核心是所有按钮共用同一个布尔状态btnState，只要状态变更，所有按钮都会同步更新。要实现仅修改最后点击的按钮状态，需要将状态改为记录当前选中的尺寸值，而非统一的布尔值。

修改后的代码如下：

import React, { useState } from "react";

export default function Button() {
  const sizes = [10, 11, 12, 13];
  // 用状态存储当前选中的尺寸，初始为null表示未选中任何选项
  const [selectedSize, setSelectedSize] = useState(null);

  // 点击时传入当前尺寸，更新选中状态
  const handleClick = (size) => setSelectedSize(size);

  return (
    <div className="button-component">
      {sizes.map((size) => (
        <button 
          className={`btn ${selectedSize === size ? 'active' : ''}`} 
          onClick={() => handleClick(size)}
          key={size} // 列表渲染必须添加key属性，避免React警告
        >
          {size} {selectedSize === size ? '选中' : '未选中'}
        </button>
      ))}
    </div>
  );
}

关键改动说明：

• 将统一布尔状态btnState替换为selectedSize，专门存储当前选中的尺寸值
• 点击事件传入当前按钮对应的尺寸，确保状态更新只关联该按钮
• 每个按钮通过自身尺寸与selectedSize的对比，独立判断是否处于选中状态
• 补充了列表渲染必需的key属性，符合React渲染规范

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