在reducer中迭代自定义可写组件的问题

// 定义action类型
const UPDATE_CUSTOM_COMPONENT = 'UPDATE_CUSTOM_COMPONENT';

// 定义action创建函数
const updateCustomComponent = (id, data) => ({
  type: UPDATE_CUSTOM_COMPONENT,
  payload: { id, data },
});

// 初始化状态
const initialState = {
  customComponents: [
    { id: 1, data: 'Component 1' },
    { id: 2, data: 'Component 2' },
    { id: 3, data: 'Component 3' },
  ],
};

// reducer处理函数
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_CUSTOM_COMPONENT:
      return {
        ...state,
        customComponents: state.customComponents.map((component) => {
          if (component.id === action.payload.id) {
            return {
              ...component,
              data: action.payload.data,
            };
          }
          return component;
        }),
      };
    default:
      return state;
  }
};

// 使用Redux的store和dispatch进行测试
const store = Redux.createStore(reducer);

// 更新自定义可写组件
store.dispatch(updateCustomComponent(2, 'Updated Component 2'));

// 获取更新后的状态
const updatedState = store.getState();
console.log(updatedState.customComponents);