我是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是一个数组？如果是这样的话，我可以在哪里以及如何修复错误？
感谢大家提前提供帮助：(
根据MDN的web文档，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);
此错误可能是由于错误地将值传递给提供程序造成的。检查支架和支架是否正确：
不正确：
<RegulatorContext.Provider value={{state, setState}}>
<Regulator />
</RegulatorContext.Provider>
正确：
<RegulatorContext.Provider value={[state, setState]}>
<Regulator />
</RegulatorContext.Provider>
我又落后于一些教程，发现了我的错误。我的.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的组件。
感谢所有帮助我的人。