Javascript TypeError:对象不可编辑（无法读取属性符号（Symbol.iterator））

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

TypeError:对象不可读取（无法读取属性 符号（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）

全球国家代码

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>
  );
};

import React，{useReducer}来自“React”；
export const GlobalContext=React.createContext（）；
常量初始状态={
当前视频片段：{}，
};
const reducer=（状态、操作）=>{
开关（动作类型）{
案例“setCurrentVideoSnippet”：
返回{
……国家，
currentVideoSnippet:action.snippet
};
违约：
返回状态；
}
};
导出常量GlobalState=props=>{
const globalState=useReducer（reducer，initialState）；
返回(
{props.children}
);
};
看起来您忘了用当前使用时创建的提供程序包装组件：

<GlobalState>
  <MediaCard />
</GlobalState>

看起来您忘了用当前使用时创建的提供程序包装组件：

<GlobalState>
  <MediaCard />
</GlobalState>

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

错误的方式：
从“../GlobalState”导入GlobalContext

正确的方法：
从“../GlobalState”导入{GlobalContext}

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

错误的方式：
从“../GlobalState”导入GlobalContext

正确的方法：
从“../GlobalState”导入{GlobalContext}

这修复了我遇到的问题，并显示了相同的错误消息。
下面是我的代码，这只是一个示例，向您说明代码中出现错误的原因

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


从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“/reducer”导入reducer，{initialState}；
从“/StateProvider”导入{StateProvider}；
ReactDOM.render(
,
document.getElementById（'root'））
);下面是我的代码，它只是一个示例，说明代码中出现错误的原因

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


从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“/reducer”导入reducer，{initialState}；
从“/StateProvider”导入{StateProvider}；
ReactDOM.render(
,
document.getElementById（'root'））
);您需要实现一个迭代器。或者您可以使用Object.keys、Object.values或Object.entries我尝试了您在codeSandbox中发布的内容，没有出现错误。也许问题在于你没有发布的代码。您需要实现一个迭代器。或者您可以使用Object.keys、Object.values或Object.entries我尝试了您在codeSandbox中发布的内容，没有出现错误。也许问题在于你没有发布的代码。