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]它，但它只适用于类似数组的对象。类数组是具有索引和长度的对象，因此它们看起来像数组。

提示：数组是内置的 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);

我再次落后于一些教程并发现了我的错误。我在错误的文件中有我的 .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 的组件。

感谢所有帮助我的人。

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

不正确：

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

正确的：

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