管理map函数中的分组按钮加载状态

import React, { useReducer } from 'react';

// 初始状态
const initialState = {
  buttons: [
    { id: 1, loading: false },
    { id: 2, loading: false },
    { id: 3, loading: false },
  ],
};

// 状态更新逻辑
const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_LOADING':
      return {
        ...state,
        buttons: state.buttons.map(button =>
          button.id === action.payload.id ? { ...button, loading: action.payload.loading } : button
        ),
      };
    default:
      return state;
  }
};

const ButtonList = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleButtonClick = (id) => {
    dispatch({ type: 'SET_LOADING', payload: { id, loading: true } });
    // 模拟异步操作
    setTimeout(() => {
      dispatch({ type: 'SET_LOADING', payload: { id, loading: false } });
    }, 2000);
  };

  return (
    <div>
      {state.buttons.map(button => (
        <button
          key={button.id}
          onClick={() => handleButtonClick(button.id)}
          disabled={button.loading}
        >
          {button.loading ? 'Loading...' : `Button ${button.id}`}
        </button>
      ))}
    </div>
  );
};

export default ButtonList;