TypeError: Object is not iterable when working with react context

Question

我是 React 的新手，我正在尝试做一个小项目并运行进入 React 上下文，因为我发现传递道具很烦人。我运行遇到了 useContext() 挂钩的问题。

我的上下文文件

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>
)

}

我正在尝试将上下文中的对象保存到这个对象中，如下所示：

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

我正在这样导入上下文：

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

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

感谢大家的提前帮助:)

Answer 1

javascript中的可迭代对象和常规对象是两个不同的概念。

根据 MDN 网络文档，javascript 中的常规对象是属性的集合，属性是名称（或键）和值之间的关联。值可以是函数或任何文字值。

可迭代对象是任何包含 [Symbol.iterator] 函数的对象。我会给你一个 Iterable 对象的例子。

let iterableObject = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3,
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
};
for (var item of iterableObject) {
    console.log(item); 
}

为了使对象可迭代，我们需要使用 [Symbol.iterator] 但它只适用于类似数组的对象。类数组是具有索引和长度的对象，因此它们看起来像数组。

提示：数组是内置的可迭代对象

现在引起您的注意，您正在使用数组（或元组）来解构常规对象文字。这就是您收到 'object is not iterable' 错误的原因。当你使用数组（或元组）时，你需要有一个可迭代的对象。

您可以通过两种方式解决这个问题。首先，您可以将您的对象转换为可迭代对象，或者我推荐的最佳解决方案是您可以使用该对象来解构常规对象。

因此，您的代码将如下所示。

export function BoardProvider(props){

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

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

默认值为 JSON 对象，以便向其添加数据。

像这样使用你的上下文。

const { board, setBoard }  = useContext(BoardContext);

Answer 2

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

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;

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

感谢大家帮助我。

Answer 3

此错误可能是由于错误地将值传递给提供程序而导致的。检查大括号和方括号是否正确：

不正确：

<RegulatorContext.Provider value={{state, setState}}>
    <Regulator />
</RegulatorContext.Provider>

正确：

<RegulatorContext.Provider value={[state, setState]}>
    <Regulator />
</RegulatorContext.Provider>

TypeError: Object is not iterable when working with react context

TypeError: Object is not iterable when working with react context

reactjs

react-context