如何替换React Redux状态对象中的数组并提交至API？

1. 转换目标item数组 #

首先要把给定的item数组字段调整成API要求的结构（将子item里的description替换为descr）：

// 转换item数组字段格式
const transformedItems = item.map(itemObj => ({
  ...itemObj,
  item: {
    ...itemObj.item,
    descr: itemObj.item.description,
    description: undefined // 移除原字段，匹配目标结构
  }
}));

2. 更新Redux状态 #

定义Action #

先创建action类型和创建函数：

// action类型常量
export const UPDATE_DATA = 'UPDATE_DATA';

// action创建函数
export const updateData = (newData) => ({
  type: UPDATE_DATA,
  payload: newData
});

编写Reducer处理状态更新 #

Redux状态必须遵循不可变更新原则，在reducer中处理状态替换：

// 初始状态（从API获取的原始数据）
const initialState = {    
    item: [],
    name: "random",
    description: "hello",
    status: "true",
    asset: [],
    version: "0.043",
};

export const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_DATA:
      return {
        ...state, // 保留原状态的其他字段
        item: action.payload.item // 替换item数组
      };
    default:
      return state;
  }
};

在组件中触发状态更新 #

使用useDispatch分发action，完成状态更新：

import { useDispatch } from 'react-redux';
import { updateData } from './path-to-your-actions';

// 组件内部逻辑
const dispatch = useDispatch();

const handleUpdate = () => {
  // 构造更新后的完整数据对象
  const updatedData = {
    ...data, // 保留原数据的非item字段
    item: transformedItems // 用转换后的item数组替换空数组
  };

  // 更新Redux状态
  dispatch(updateData(updatedData));

  // 提交到API
  submitDataToAPI(updatedData);
};

3. 提交数据到API #

根据API要求选择fetch或axios实现提交逻辑：

使用fetch的示例 #

const submitDataToAPI = async (updatedData) => {
  try {
    const response = await fetch('your-api-endpoint', {
      method: 'PUT', // 或POST/PATCH，根据API要求调整
      headers: {
        'Content-Type': 'application/json',
        // 如需认证，添加Authorization头：'Authorization': 'Bearer your-token'
      },
      body: JSON.stringify(updatedData)
    });

    if (!response.ok) throw new Error('请求失败');
    const result = await response.json();
    console.log('数据提交成功:', result);
  } catch (error) {
    console.error('提交失败:', error);
  }
};

使用axios的示例 #

import axios from 'axios';

const submitDataToAPI = async (updatedData) => {
  try {
    const response = await axios.put('your-api-endpoint', updatedData, {
      headers: {
        'Content-Type': 'application/json',
        // 认证头按需添加
      }
    });
    console.log('数据提交成功:', response.data);
  } catch (error) {
    console.error('提交失败:', error);
  }
};

关键注意事项 #

• 必须保证Redux状态更新是不可变的，绝对不能直接修改原state对象
• 确认API接受的HTTP方法和请求头格式，避免提交失败
• 转换item数组时，确保子item的description字段完全替换为descr，避免字段冗余

内容的提问来源于stack exchange，提问作者Muhammad Misbah Ul Haq