React中.map()循环渲染时如何仅更新被点击的单个按钮元素

别用手动查DOM改内容的方案，这是反React设计模式的，后续列表变动、组件重渲染时很容易出现UI和状态不同步的问题，调试和维护成本极高。
你之前用单一状态控制所有按钮的问题本质是状态粒度太粗，根本不需要绕去操作DOM，调整下状态设计就能完美解决，给你两个最常用的落地方案：

• 方案1：按列表项唯一ID存储按钮状态
  不要用单个布尔值/字符串存全局的按钮状态，换成键值对结构的状态对象：key对应列表项的唯一业务ID，value对应该项按钮的状态值，点击时只更新对应ID下的状态，自然就能实现单个按钮的独立更新。
  示例代码：

import { useState } from 'react';

// 示例列表数据，实际业务里替换成你的数据源即可
const itemList = [
  { id: 'uid_1', content: '配置项1' },
  { id: 'uid_2', content: '配置项2' },
  { id: 'uid_3', content: '配置项3' },
]

export default function GenerateList() {
  // 存储所有按钮的状态，key为列表项id，value为按钮状态：idle/loading/success/error
  const [buttonStatusMap, setButtonStatusMap] = useState({});

  const handleGenerate = async (targetId) => {
    // 仅更新当前点击按钮的状态为加载中
    setButtonStatusMap(prev => ({...prev, [targetId]: 'loading'}));
    try {
      // 替换成你自己的生成逻辑，比如接口请求
      await fetch(`/api/task/generate?bizId=${targetId}`);
      setButtonStatusMap(prev => ({...prev, [targetId]: 'success'}));
    } catch (err) {
      setButtonStatusMap(prev => ({...prev, [targetId]: 'error'}));
    }
  }

  return (
    <div className="list-container">
      {itemList.map(item => {
        const currentBtnStatus = buttonStatusMap[item.id] || 'idle';
        return (
          <div className="list-item" key={item.id}>
            <span>{item.content}</span>
            <button 
              onClick={() => handleGenerate(item.id)}
              disabled={currentBtnStatus === 'loading'}
            >
              {
                currentBtnStatus === 'loading' ? '生成中...' :
                currentBtnStatus === 'success' ? '重新生成' :
                currentBtnStatus === 'error' ? '生成失败，重试' :
                'Generate'
              }
            </button>
          </div>
        )
      })}
    </div>
  )
}

• 方案2：拆分独立按钮组件，状态内聚隔离
  如果按钮的生成逻辑、展示状态不需要和父组件、其他兄弟按钮共享，直接把按钮抽成独立组件，每个组件实例自己维护内部状态，天然就是状态隔离的，代码解耦性更好，父组件也不用维护一大坨按钮状态逻辑。
  示例代码：

import { useState } from 'react';

// 独立的生成按钮组件，自己管自己的状态
function GenerateButton({ bizId }) {
  const [status, setStatus] = useState('idle');

  const handleClick = async () => {
    setStatus('loading');
    try {
      await fetch(`/api/task/generate?bizId=${bizId}`);
      setStatus('success');
    } catch {
      setStatus('error');
    }
  }

  return (
    <button onClick={handleClick} disabled={status === 'loading'}>
      {
        status === 'loading' ? '生成中...' :
        status === 'success' ? '重新生成' :
        status === 'error' ? '生成失败，重试' :
        'Generate'
      }
    </button>
  )
}

// 父组件直接渲染即可，不需要关心按钮的内部状态
export default function GenerateList() {
  return (
    <div className="list-container">
      {itemList.map(item => (
        <div className="list-item" key={item.id}>
          <span>{item.content}</span>
          <GenerateButton bizId={item.id} />
        </div>
      ))}
    </div>
  )
}

注意：map遍历渲染列表时，一定要给列表项设置数据本身自带的唯一业务ID作为key属性，不要用数组下标，否则列表排序、增删元素时会出现状态串位、UI错乱的问题。除非你要做聚焦输入框、获取元素尺寸这类必须碰DOM的操作，否则永远优先走React的状态驱动更新流程，不要手动操作DOM。

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