TypeError：当我在Reactjs中使用ContexAPI时对象是不可迭代的

编程问答 2022-08-15

问题描述

我试图在ReactJs中使用 ContextAPI 在组件之间共享数据。 但是我在使用时卡住了。 这个错误是：

"TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))"
at
line 7: *const [state,dispatch] = useContext(AppContext);*

这是我的代码。

文件context.js 

import React from "react";
import { useImmer } from "use-immer";

const defaultState = {
    Feed: [],listFeed: [],};

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
    const [state,dispatch] = useImmer({ ...defaultState });

    return (
        <AppContext.Provider value={[state,dispatch]}>
            {children}
        </AppContext.Provider>
    );
};

export { AppProvider,AppContext };

和文件useContextApp.js 

import { useContext} from "react";

import { AppContext } from "./context";

const useAppContext = () => {
    const [state,dispatch] = useContext(AppContext);

    function updateFeed(Feed) {
        dispatch((draft) => {
            draft.Feed = Feed;
        })
    }

    function updateListFeed(listFeed) {
        dispatch((draft)  => {
            draft.listFeed = listFeed;
        })
    }

    return {
        ...state,updateFeed,updateListFeed,};
};

export { useAppContext };

并在HomePage中使用它。

const { updateFeed} = useAppContext();

解决方法

也许应该在body { background-color: #b6e6bd; line-height: 1.6; } /* Containers */ .container-fluid { padding: 1% 20%; margin: auto; text-align: center; } 中使用useImmerReducer而不是useImmer，如下所示：

基于AppProvider钩的Immer动力减速器

阅读文档后，我发现了以下内容：

useReducer

因此，您的示例将是：

const [state,dispatch] = useImmerReducer(reducer,initialState);

更多详细信息：

请参见useImmer的文档，该文档与const [state,dispatch] = useImmerReducer({ ...defaultState }); 相似：

useState与useImmer(initialState)非常相似。该函数返回一个元组，该元组的第一个值是当前状态，第二个是更新程序函数，该函数接受一个沉浸式生产者函数，在其中可以自由更改草稿，直到生产者结束并进行更改不变，成为下一个状态。

从技术上讲，您正在寻找的是减速器一（useState）。

react-hooksreactjsreactjstypeerroruse-context