【问题标题】：How to make state iterable and resolve "Unhandled Rejection (TypeError): state.story is not iterable"?如何使状态可迭代并解决“未处理的拒绝（TypeError）：state.story 不可迭代”？
【发布时间】：2020-11-24 08:49:49
【问题描述】：

我通过 redux 和 axios 将一些文件和一些其他数据发送到我的后端。但是，当我这样做时，我收到以下错误消息Unhandled Rejection (TypeError): state.story is not iterable。虽然错误发生在我的react js前端，但数据已成功发送到我的后端。当我发送正常的键值对并且没有数组时，它也可以正常工作。

我现在想知道如何使 state.story 可迭代？或者更笼统地说，如何解决这个问题？

// creating the form data
onClickUpload (e){
  let files = this.state.image;
  let formData = new FormData();

  formData.append('title', "Some_Title")

  for (var i = 0; i < files.length; i++) {
    formData.append(`story_media[${i}]isTitlePicture`, files[i].isTitlePicture)
    formData.append(`story_files[${i}]files`, files[i].file)
  }

    this.props.addStory(formData);

}

// ADD Story Action
export const addStory = formDataStory => (dispatch, getState) =>
new Promise((resolve, reject) => {
  axios.post(apiBase +"/story/createupdatedestroy/", formDataStory, tokenConfig(getState) )
    .then(res => {
      dispatch(createMessage({ addStory: "Story Added" }));
      dispatch({
        type: ADD_STORY,
        payload: res.data
      });
      resolve(res);
    })
    .catch(err => {
      reject(err);
      dispatch(returnErrors(err.response.data, err.response.status))
    }
  );

// Add STory Reducer
const initialState = {
  story: [],
  isFetching: "idle"
};

export default function (state = initialState, action) {
  switch (action.type) {
case GET_STORY_REQUEST:
      return {
        ...state,
        isFetching: "loading"
      };

case GET_STORY_SUCCESS:
      return {
        ...state,
        story: action.payload,
        isFetching: "success"
      };

case GET_STORY_FAILURE:
      return {
      isFetching: "failure"
      };

case GET_SINGLE_STORY:
     return {
        ...state,
        story: state.story.filter(story => story.id !== action.payload)
      };

case DELETE_STORY:
      return {
        ...state,
        story: state.story.filter(story => story.id !== action.payload)
      };

case EDIT_STORY:
      return {
        ...state,
        story: state.story.filter(story => story.id  !== action.payload)
      };


case ADD_STORY:
      return {
        ...state,
        story: [...state.story, action.payload]
      };



    default:
      return state;
  }
}

【问题讨论】：

这是整个减速器吗？
现在它是故事的整个减速器。
谢谢。 GET_STORY_FAILURE 不会复制现有状态。如果您还在返回的状态对象中传播state，这是否可以解决或更改错误？我只是在寻找任何可以使 state.story 不再成为数组的东西。您是否在浏览器中安装并运行了 redux-dev-tools，以便您可以检查您的状态并手动调度操作，或者至少实时监控它们？
谢谢@Drew Reese！如果您将其发布为我可以接受的答案，它会起作用。

标签： javascript reactjs redux axios

【解决方案1】：

问题

您的减速器案例之一是未正确复制状态对象。它忽略了将当前状态复制到新的状态对象中。

case GET_STORY_FAILURE:
  return {
    isFetching: "failure"
  };

解决方案

将现有状态复制到新状态对象中。

case GET_STORY_FAILURE:
  return {
    ...state,
    isFetching: "failure"
  };

【讨论】：