TypeError:对象不可迭代(无法读取属性Symbol(Symbol.iterator))

Question

我试着运行这段代码，但它给了我一个运行时错误，说

TypeError：对象不可迭代(无法读取属性Symbol(Symbol.iterator((

这是代码。

import React, { useContext} from "react";
import { GlobalContext } from '../GlobalState';
const MediaCard = ({ songs, categotyTitle }) => {
const [{}, dispatch] = useContext(GlobalContext);
const setCurrentVideoSnippet = data => {
dispatch({ type: "setCurrentVideoSnippet", snippet: data });
};
export default MediaCard;

错误指向这行代码const [{}, dispatch] = useContext(GlobalContext);

GlobalState代码

import React, { useReducer } from "react";
export const GlobalContext = React.createContext();
const initialState = {
currentVideoSnippet: {}, 
};
const reducer = (state, action) => {
switch (action.type) {
case "setCurrentVideoSnippet":
return {
...state,
currentVideoSnippet: action.snippet
};
default:
return state;
}
};
export const GlobalState = props => {
const globalState = useReducer(reducer, initialState);
return (
<GlobalContext.Provider value={globalState}>
{props.children}
</GlobalContext.Provider>
);
};

Answer 1

我知道这并不能解决OP的问题，但对于像我这样在这个页面上出现相同运行时错误消息的人来说，我的问题是因为我导入GlobalContext组件的方式造成的。

错误的方式：import GlobalContext from '../GlobalState';

正确的方式：import { GlobalContext } from '../GlobalState';

这修复了我遇到的带有相同错误消息的问题。

Answer 2

您似乎忘记了用当前使用时创建的提供程序包装组件：

<GlobalState>
<MediaCard />
</GlobalState>

Answer 3

下面是我的代码，它只是一个示例，向您展示代码中出现错误的原因。

您创建的数据层没有包裹在整个web应用程序的组件中，因此MediaCard组件无法识别它。。。你需要做的只是进入你的index.js并将StateProvider包裹在主应用上

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import reducer, { initialState } from "./reducer";
import { StateProvider} from'./StateProvider';
ReactDOM.render(
<React.StrictMode>
<StateProvider initialState={ initialState } reducer={ reducer }>
<App />
</StateProvider>
</React.StrictMode>,
document.getElementById('root')
);