React中如何实现Map渲染按钮的独立onClick Loading状态？

问题根源在于你现在用的是全局的props.loading状态，所有列表项的按钮都共享同一个状态，所以点击任意按钮时，所有加载器都会触发。要实现单个按钮独立控制加载，需要给每个列表项分配独立的loading状态，下面提供两种可行方案：

方案一：将按钮封装为独立子组件，内部维护自身loading状态 #

把每个按钮做成独立组件，让组件自己管理加载状态，这样每个按钮的状态互不干扰：

// 独立的列表项按钮组件
const ItemSaveButton = ({ item }) => {
  const [loading, setLoading] = useState(false);

  const handleSave = async () => {
    setLoading(true);
    try {
      // 这里替换成你的保存逻辑，比如调用后端接口
      await fetch(`/api/save-item/${item.id}`, {
        method: 'POST',
        body: JSON.stringify(item)
      });
    } catch (err) {
      // 处理保存失败的情况
      console.error('保存出错:', err);
    } finally {
      // 无论成功失败，都关闭加载状态
      setLoading(false);
    }
  };

  return (
    <Button onClick={handleSave}>
      Save {loading && <CircularProgress />}
    </Button>
  );
};

// 原列表渲染部分改造
List.map((item) => {
  // 用item的唯一ID作为key，比索引更可靠
  return <ItemSaveButton key={item.id} item={item} />;
});

方案二：父组件维护每个列表项的loading状态集合 #

如果需要在父组件统一管理所有列表项的加载状态，可以用对象或数组来记录每个item的加载状态：

// 父组件内部状态
const [itemLoadingStatus, setItemLoadingStatus] = useState({});

const handleItemSave = async (itemId) => {
  // 标记当前item为加载中
  setItemLoadingStatus(prev => ({ ...prev, [itemId]: true }));
  try {
    // 执行保存逻辑
    await saveItemById(itemId);
  } catch (err) {
    console.error('保存失败:', err);
  } finally {
    // 关闭当前item的加载状态
    setItemLoadingStatus(prev => ({ ...prev, [itemId]: false }));
  }
};

// 列表渲染部分
List.map((item) => {
  const isLoading = itemLoadingStatus[item.id] || false;
  return (
    <Button 
      onClick={() => handleItemSave(item.id)}
      key={item.id}
    >
      Save {isLoading && <CircularProgress />}
    </Button>
  );
});

核心思路就是让每个列表项拥有独立的loading状态，不再共用全局的props.loading，这样点击哪个按钮就只会更新对应项的加载状态。

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