开发者问题收集

TypeError：使用 React 上下文时对象不可迭代

2020-11-20
10954
reactjs react-context

我是 React 新手，我正在尝试做一个小项目，遇到了 React 上下文，因为我发现传递 props 很烦人。我在使用 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 是一个数组？如果是这样，那么具体在哪里，我该如何修复 错误 ？

提前感谢大家的帮助：）

3个回答

javaScript中的可触觉对象和常规对象是两个不同的概念。

根据MDN Web Doc，JavaScript中的常规对象是属性的集合，并且属性是名称（或键之间的关联） ）和一个价值。值可以是函数或任何文字值。

具有 [symend.iterator] 函数的任何对象是任何对象。我给您一个估计的对象的示例。

613950753

以使对象具有疑问，我们需要使用 [symber.iterator] ，但是它将仅使用类似数组的对象。像数组一样，是具有索引和长度的对象，因此它们看起来像数组。

提示： 数组是内置的，是内置的对象

现在引起您的关注，您正在使用数组（或元组）破坏常规对象字面的构度。这就是您因“对象是不可能”而获得错误的原因。当您使用数组（或元组）时，您需要具有一个可觉得的对象。

您可以通过两种方式解决此问题。首先，您可以将对象转换为一个可观的对象或我建议的最佳解决方案是您可以使用对象破坏常规对象。

因此，您的代码看起来像这样。 554457544

默认值将是json对象以添加数据。

使用这样的上下文。

846395703

Subrato Pattanaik
2020-11-20

此错误可能是错误地传递给提供商的。检查括号和支架是正确的：

不正确：

896809330

正确：

124576192

Onshop
2021-05-21

我再次查阅了一些教程，发现了我的错误。我的 .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 组件。

感谢大家的帮助。

nicolabaechi
2020-11-21