TypeError:使用反应上下文时对象不可迭代 [英] TypeError: Object is not iterable when working with react context

问题描述

我是 React 新手，我正在尝试制作一个小项目并遇到 React 上下文，因为我发现传递道具很烦人.我遇到了 useContext() 钩子的问题.

我的上下文文件

导出函数 BoardProvider(props){const [板，setBoard] = useState({id:空，名称:空，长期:假，代码:空，老师:空，期间开始:空，期末:空，总持续时间:空，阶段:[]，学生们: []})返回 (<BoardContext.Provider value={[board, setBoard]}>{props.children}</BoardContext.Provider>)

}

我正在尝试将上下文中的对象保存到这样的对象中:

const [ board, setBoard ] = useContext(BoardContext);

我正在像这样导入上下文:

import { BoardProvider } from '../../contexts/BoardContext'

错误表明该对象不可迭代，所以我假设我在某处声明 board 是一个数组?如果是这样，我该如何解决错误?

感谢大家提前提供帮助:)

解决方案

我再次落后于一些教程，发现我的错误.我在错误的文件中有我的 .Provider 标签.它应该在路由器所在的应用程序中，您可以在其中调用所有组件，以便它们都可以访问上下文.

function RouterApp() {const [ board, setBoard ] = useState(null);const value = useMemo(() => ({ board, setBoard}), [ board, setBoard])返回 (<路由器>
<BoardContext.Provider value={value}><开关><路由路径="/";精确组件={BoardName}/><Route path="/createboard/:name";精确分量={TimePeriod}/><Route path="/createboard:name/phases";精确分量={PhaseForm}/></开关></BoardContext.Provider>
</路由器>);}导出默认 RouterApp；

这是我的路由器函数，我将上下文传递给 BoardName、TimePeriod 和 PhaseForm 的组件.

感谢所有帮助我的人.

Im new to react and im trying to make a little project and ran into react context because i find it annoying passing down the props. I'm running into a problem with the useContext() hook.

My Context file

export function BoardProvider(props){

const [ board, setBoard ] = useState({
    id: null,
    name:  null,
    longterm: false,
    code: null,
    teacher: null,
    periodStart: null,
    periodEnd: null,
    totalDuration: null,
    phases: [],
    students: []

})
return (
    <BoardContext.Provider value={[board, setBoard]}>
        {props.children}
    </BoardContext.Provider>
)

}

And I'm trying to save the object from the context into this one like so:

const [ board, setBoard ]  = useContext(BoardContext);

I'm importing the Context like this:

import { BoardProvider } from '../../contexts/BoardContext'

The error says the object is not iterable so I assume that i declare somewhere that board is an array? If that is so where exactly and how can I fix the error?

Thanks for everyone helping in advance:)

解决方案

I got behind some tutorials again and found my mistake. I had my .Provider tag in the wrong file. It's supposed to be in the App where the Router is, where you call all the components so they all have access to the context.

function RouterApp() {

    const [ board, setBoard ] = useState(null);

    const value = useMemo(() => ({ board, setBoard}), [ board, setBoard])

    return (
        <Router>
            <div className="App">
                <BoardContext.Provider value={value}>
                    <Switch>
                        <Route path="/" exact component={BoardName} />
                        <Route path="/createboard/:name" exact component={TimePeriod} />
                        <Route path="/createboard:name/phases" exact component={PhaseForm} />
                    </Switch>
                </BoardContext.Provider>

            </div>
        </Router>
    );
}

export default RouterApp;

Here's my router function, where im passing the context to the components to BoardName, TimePeriod and PhaseForm.

Thanks for everyone helping me.

这篇关于TypeError:使用反应上下文时对象不可迭代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！