0

我正在尝试使用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 };

并在主页中使用它。

const { updateFeed} = useAppContext();
4

1 回答 1

1

也许useImmer你应该使用useImmerReducerin而不是AppProvider，见下文：

浸入式动力减速机，基于useReducer钩子

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

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

所以你的例子是：

const [state, dispatch] = useImmerReducer({ ...defaultState });

详细信息：

从文档中查看useImmer类似于useState：

useImmer(initialState)非常相似useState。该函数返回一个元组，该元组的第一个值是当前状态，第二个是updater函数，它接受一个immer producer函数，在其中可以自由地修改draft，直到producer结束并进行更改不可变并成为下一个状态。

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

于 2020-08-22T08:18:53.367 回答