reactjs - 类型错误 : Object is not iterable when working with react context

Question

我是 React 的新手，我正在尝试做一个小项目并遇到 React 上下文，因为我发现传递 props 很烦人。我遇到了 useContext() Hook 的问题。

我的上下文文件

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

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