如何在map遍历数组时仅操作被点击按钮，不影响其他按钮？

你当前的问题核心是所有按钮共用了同一个状态变量，导致点击任意一个按钮时，所有按钮的文本都会跟着变化。要实现单个按钮独立控制，需要给每个按钮绑定独有的状态标识，具体实现如下：

方案一：用Set存储已点击项的唯一标识（推荐） #

假设你的data数组中每个项都有唯一的id字段（如果没有，也可以用遍历的index，但id更可靠）：

import { useState } from 'react';

// 定义状态，用Set存储已点击的项ID
const [addedItemIds, setAddedItemIds] = useState(new Set());

// 遍历渲染部分
{data.map((values) => (
  <Items key={values.id}>
    <h5>Title: {values.title}</h5>
    <h2>Price: {values.price}</h2>
    <img src={values.image} alt={values.title} width="100" height="60" />
    <Addbutton 
      onClick={() => {
        setAddedItemIds(prev => {
          const newIds = new Set(prev);
          // 切换当前项的选中状态
          if (newIds.has(values.id)) {
            newIds.delete(values.id);
          } else {
            newIds.add(values.id);
          }
          return newIds;
        });
      }}
    >
      {/* 根据当前项是否在Set中，动态显示文本 */}
      {addedItemIds.has(values.id) ? '已添加' : '添加'}
    </Addbutton>
  </Items>
))}

方案二：用对象存储每个按钮的状态 #

如果需要更灵活的状态控制（比如按钮文本不是简单的切换，而是多种状态），可以用对象存储每个项的状态：

import { useState } from 'react';

// 定义状态，键为项的ID，值为按钮状态（这里用布尔值示例）
const [buttonStates, setButtonStates] = useState({});

// 遍历渲染部分
{data.map((values) => (
  <Items key={values.id}>
    <h5>Title: {values.title}</h5>
    <h2>Price: {values.price}</h2>
    <img src={values.image} alt={values.title} width="100" height="60" />
    <Addbutton 
      onClick={() => {
        setButtonStates(prev => ({
          ...prev,
          // 切换当前项的状态：如果之前是true就设为false，反之亦然
          [values.id]: !prev[values.id]
        }));
      }}
    >
      {buttonStates[values.id] ? '已添加' : '添加'}
    </Addbutton>
  </Items>
))}

关键注意点 #

• 必须给map遍历的Items组件添加唯一的key属性（优先用数据自带的唯一ID，避免用index，尤其是数据可能增删的场景），否则React无法正确识别每个组件的独立性，导致渲染异常。
• 状态更新时要遵循React的不可变原则：直接修改原Set/对象会导致组件不重新渲染，必须返回新的Set/对象。

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