NextJS中useReducer数组无法存储首个上传图片问题

可能的原因 #

1. 初始状态未正确初始化：如果useReducer的初始状态中selectedImageUpload被设为undefined或null，而非空数组[]，第一次执行[...state.selectedImageUpload, action.payload]会抛出迭代错误，导致第一张图片无法存入数组。
2. 其他action意外修改状态：IsSELECTED_IMAGES对应的reducer case可能错误覆盖了selectedImageUpload数组，比如将其重置或替换，导致第一张图片被清空。
3. action type拼写不一致：dispatch中的actionEnum.SELECTEDIMAGEUPLOAD与reducer case中的type存在拼写/大小写差异，导致第一个action未被正确处理。
4. 工具函数返回值异常：首次选择文件时，selectFiles可能未正确返回包含img的对象，导致payload为undefined。

解决步骤 #

1. 修正初始状态
   确保useReducer的初始状态中selectedImageUpload初始化为空数组：

const initialState = {
  selectedImageUpload: [],
  // 其他状态字段
};

2. 检查IsSELECTED_IMAGES的reducer逻辑
   该action应仅处理预览图状态，不能修改存储文件的selectedImageUpload数组，示例正确逻辑：

case actionEnum.IsSELECTED_IMAGES:
  return {
    ...state,
    // 假设预览图存在selectedImagesPreview字段中
    selectedImagesPreview: [...(state.selectedImagesPreview || []), action.payload]
  };

3. 添加日志排查流程
   在关键环节添加日志，确认每一步的数据是否正确：

• 工具函数中：

export const selectFiles = (file: React.ChangeEvent<HTMLInputElement>)=>{
    const files = file?.target?.files;
    const fileLen = files?.length || 0;
    if(fileLen > 0){
        const img = files[0] as File;
        console.log('首次选择的文件:', img); // 确认文件是否获取到
        const prevImg = URL.createObjectURL(img);
        return {prevImg, img}
    }
    else return undefined;
};

• 处理函数中：

const handleSelection = (file: React.ChangeEvent<HTMLInputElement>)=>{
  const result = selectFiles(file);
  console.log('selectFiles返回结果:', result); // 确认结果是否包含img
  dispatch({type: actionEnum.SELECTEDIMAGEUPLOAD, payload: result?.img});
}

• reducer中：

case actionEnum.SELECTEDIMAGEUPLOAD:
  console.log('当前数组状态:', state.selectedImageUpload);
  console.log('待添加的文件:', action.payload);
  const newArray = [...state.selectedImageUpload, action.payload];
  console.log('更新后的数组:', newArray);
  return{
      ...state,
      selectedImageUpload: newArray
  }

4. 校验action type一致性
   确保actionEnum.SELECTEDIMAGEUPLOAD在dispatch和reducer case中的拼写、大小写完全一致，避免因类型不匹配导致action被忽略。

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