TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))答案

【问题标题】：TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
【发布时间】：2020-11-06 19:25:47
【问题描述】：

我尝试运行此代码，但它给了我一个运行时错误提示

TypeError: Object is not iterable (cannot read property 符号（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>
  );
};

【问题讨论】：

你需要实现一个迭代器。或者您可以使用 Object.keys、Object.values 或 Object.entries
我试过你在codeSandbox中发布的内容，没有错误。也许问题在于您尚未发布的某些代码。 https://codesandbox.io/s/infallible-hugle-6m4iv?file=/src/globalContext.js

标签： javascript reactjs react-hooks state use-reducer

【解决方案1】：

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

您创建的数据层没有包裹在整个 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')
);

【讨论】：

【解决方案2】：

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

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

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

这解决了我遇到的相同错误消息的问题。

【讨论】：

【解决方案3】：

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

<GlobalState>
  <MediaCard />
</GlobalState>

【讨论】：