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 组件识别......您需要做的只是进入您的 {{ 1}} 并将 index.js 包裹在主应用程序

StateProvider

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

3 个答案: