Reactjs 类型脚本错误：必须有一个'；[Symbol.iterator]（）'；在上下文中使用react usereducer钩子时返回迭代器的方法为什么？

我使用的是typescript，不太熟悉，当我使用context和useReducer钩子时，我会遇到以下错误，尤其是对于我的分派方法，我会遇到以下错误：

contextProps must have a '[Symbol.iterator]()' method that returns an iterator.

我试着研究一下，但不知道该怎么办。我认为这是因为const[state，dispatch]=useContext（GlobalState）；由于数组的原因，我需要指定一些内容。 此外，我得到了一个ts错误的价值

  <GlobalState.Provider value={[state, dispatch]}>

（参见下面代码中的）。不知何故，当我将其设置为数组时，我在ContextProps中定义的所有属性都会丢失。 任何帮助都会很有帮助

//context.js file
export interface ProjectProps {
  projects: string[]
}

export interface ContextProps extends ProjectProps {
  show: boolean
  posts: string[]
  //...
}

const initialState = {
  posts: [],
  show: false
  //...
};

export const GlobalState = React.createContext<ContextProps | null>(
  initialState
)

const reducer = (state, action) => {
  switch (action.type) {
    case "SHOW":
      return { ...state, show: !state.show }

    default:
      return state
  }
}

const Store: React.FC<{ children: React.ReactNode }> = ({children}) => {
  const [state, dispatch] = useReducer(Reducer, initialState);
  return (
      <GlobalState.Provider value={[state, dispatch]}>
          {children}
      </GlobalState.Provider>
  )
};


const App = () => {
  return (
      <Store>
          <Header/>
          <Blog/>
      </Store>
  );
};

const Blog = () => {

  const [state, dispatch] = useContext(GlobalState);

  return (
      <div>
        <button onClick={dispatch({type: "SHOW"})}></button>
        {state.show ? <p>hello</p> : null }
      </div>
  );
};

//context.js文件
导出接口项目道具{
项目：字符串[]
}
导出接口ContextProps扩展ProjectProps{
显示：布尔值
posts:string[]
//...
}
常量初始状态={
员额：[]，
节目：假
//...
};
export const GlobalState=React.createContext(
初始状态
)
const reducer=（状态、操作）=>{
开关（动作类型）{
案例“展示”：
返回{…状态，显示：！state.show}
违约：
返回状态
}
}
常量存储：React.FC=（{children}）=>{
const[state，dispatch]=useReducer（Reducer，initialState）；
返回(
{儿童}
)
};
常量应用=（）=>{
返回(
);
};
const Blog=（）=>{
const[state，dispatch]=useContext（GlobalState）；
返回(
{state.show？你好
：空}
);
};

您提供的代码似乎有一些问题

首先，我将从添加更多打字开始。
特别是

reducer

的参数和输出，以及

const[state，dispatch]=useReducer（reducer，initialState）

（注意：我假设

reducer

在这里是小写的，尽管它在代码示例中是

reducer

接下来，我认为与您如何使用上下文相比，上下文的定义存在问题。
如果您想向提供商提供

状态

和

调度

（如

所示），那么我希望您的上下文定义更像这样：

interface Context {
  state: {
    show: boolean;
    posts: string[];
    //...
  };
  dispatch: React.Dispatch<any>; // I don't know what any should be in your case
}

接口上下文{
声明：{
显示：布尔；
职位：字符串[]；
//...
};
dispatch:React.dispatch；//我不知道你的案子里应该有什么
}

请注意：

• 您的提供商将更改为：

• 用法将更改为：

  const{state，dispatch}=useContext（GlobalState）；

如果您确实想使用

[state，dispatch]

作为上下文的输出，那么应该使用

类型context=[{show:boolean；posts:string[]；}，React.dispatch]

而不是

接口

最后，像

…这样的错误必须有一个返回迭代器的“[Symbol.iterator]”方法。

通常意味着您正在通过一个不是可以迭代的类型的对象进行迭代（使用

for

，

while

，…）。可以迭代的类型的一个示例是

数组

如果您希望获得关于最后一个错误的更多指导，那么如果您指定了此错误发生的确切位置，这将有所帮助。
谢谢。无论我在哪里使用上下文（->const[state，dispatch]=useContext（GlobalState），我都会得到[Symbol.iterator]对于state和/或dispatch。另外，我没有添加更多的打字，因为这与我的问题无关，但谢谢你。我也尝试了你的上下文定义，但它实际上只给了我错误，现在我考虑它
const[state，dispatch]=useContext（GlobalState）
。您正在将数组分解为两个变量。但是
GlobalState
从
React.createContext（initialState）
获取其类型。该数组不是数组，无法迭代。