React Native 出现错误“传播不可迭代实例的尝试无效。” 在将数据添加到空数组时

Question

尝试在空数组中添加数据，但在从 adddata 屏幕调用 addBlogPost 时在 BlogContext 文件中出现以下错误：

传播不可迭代实例的无效尝试。 为了可迭代，非数组对象必须具有 Symbol.iterator 方法。 - node_modules/@babel/runtime/helpers/nonIterableSpread.js:2:22 in _nonIterableSpread - node_modules/@babel/runtime/helpers/toConsumableArray.js:10:111 in _toConsumableArray * src/context/BlogContext.js:6:8在博客减速机

下面是 BlogContext 的代码

import createDataContext from "./createDataContext";

const blogReducer = (state, action) => {
  switch (action.type) {
    case "add_blogpost":
      return [
        ...state,
        {
          id: Math.floor(Math.random() * 9999),
          title: action.payload.title,
          content: action.payload.content,
        },
      ];
    case "edit_blogpost":
      return state;
    case "delete_blogpost":
      return state.filter((blogPost) => blogPost.id != action.payload);
    default:
      return state;
  }
};

const addBlogPost = (dispatch) => {
  return (title, content, callBack) => {
    dispatch({
      type: "add_blogpost",
      payload: { title: title, content: content },
    });

    callBack();
  };
};

const deleteBlogPost = (dispatch) => {
  return (id) => {
    dispatch({ type: "delete_blogpost", payload: id });
  };
};

export const { Context, Provider } = createDataContext(
  blogReducer,
  { addBlogPost },
  { deleteBlogPost },
  []
);

Answer 1

const blogReducer = (state, action) 

state 这里一开始是未定义的，所以试试这个

const blogReducer = (state = [], action) 

Answer 2

它现在工作正常，我在下面的代码中犯了错误：

export const { Context, Provider } = createDataContext(
  blogReducer,
  { addBlogPost },
  { deleteBlogPost },
  []
);

这些 { addBlogPost }, { deleteBlogPost }，两个应该在同一个 object 中，如 {addBlogPost, deleteBlogPost}，只有这个更改才能工作，感谢所有帮助