Redux 循环执行dispatch操作时如何存储接口返回的id数组

核心错误点 #

你的问题出在reducer的PUSH_ID_IMAGE分支逻辑：你每次dispatch传入的payload是单条图片ID值，不是数组，直接对单个ID用扩展运算符(...)属于非法用法，既会报错也无法实现ID追加存储的需求。

1. 修正reducer代码 #

将新ID追加到原有images数组末尾即可，注意要先给reducer设置初始状态，保证images默认是空数组：

const initialState = {
  // 其他原有状态
  images: []
}

// case分支修改为：
case "PUSH_ID_IMAGE":
  return {
    ...state,
    images: [...state.images, action.payload]
  }

2. 修正并优化action代码 #

你原有代码中async关键字位置错误，且没有上传异常捕获逻辑，同时循环并行请求无法保证ID存储顺序和上传顺序一致，可参考以下优化后的写法：

export function uploadImage(files) {
  // async关键字要放在function前面，原有写法语法错误
  return async function(dispatch) {
    const myHeaders = new Headers();
    myHeaders.append("Authorization", `Token ${localStorage.getItem('***')}`)
    // 用for of配合await保证上传和ID存储顺序和选择文件顺序一致
    for (const file of files) {
      try {
        const formdata = new FormData();
        formdata.append("image", file, file.name);
        const resp = await fetch(`${process.env.REACT_APP_URL_API}/api/images/`, {
          method: "POST",
          headers: myHeaders,
          body: formdata,
          redirect: 'follow'
        })
        const json = await resp.json()
        dispatch(activeImage(json.id))
      } catch (err) {
        // 可自行添加上传失败的业务处理逻辑
        console.error('图片上传失败', err)
      }
    }
  }
}

export const activeImage = ( id ) => ({
  type: "PUSH_ID_IMAGE",
  payload: id
});

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