类型错误：对象不可迭代（无法读取属性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);

全局状态代码

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

- Paschal

---

你需要实现一个迭代器。或者你可以使用Object.keys、Object.values或Object.entries。 - Dom

我在 codeSandbox 上尝试了你发布的代码，没有出现任何错误。也许问题出在你没有发布的某些代码上。https://codesandbox.io/s/infallible-hugle-6m4iv?file=/src/globalContext.js - EvanMorrison

Answer 1

我知道这并不能解决原帖作者的问题，但对于那些像我一样看到同样运行时错误信息的人，我的问题是由于导入 GlobalContext 组件的方式造成的。

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

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

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

- Cody Thompson

Answer 2

看起来您忘记将组件包装在创建的提供程序中，因为您当前正在使用它：

<GlobalState>
  <MediaCard />
</GlobalState>

- tmhao2005

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

- Sourav Das