React Context报TS2461错误：类型'{}'不是数组类型，求修复方案

云上老周

2026-8-24

修复React+TypeScript中StatusContext的TS2461错误

错误原因

你当前的问题是Context的类型与实际传递的值不匹配：

用React.createContext({})创建Context时，TypeScript自动推断它的类型为{}（空对象）
但你在Provider里传递的是useState返回的数组（状态值+更新函数）
当你在组件里用数组解构useContext(StatusContext)时，TS认为你要解构一个对象，自然抛出“Type '{}' is not an array type”的错误

修复步骤

1. 给StatusContext指定正确类型并修正初始值

修改状态上下文代码，显式声明Context的类型（对应useState返回的数组类型），并设置匹配的初始值：

import * as React from "react";

// 定义Context的类型：[状态值, 更新函数]
type StatusContextType = [string, React.Dispatch<React.SetStateAction<string>>];

// 创建Context时指定泛型，并设置符合类型的初始值
export const StatusContext = React.createContext<StatusContextType>([
  "", 
  () => {} // 空函数作为初始更新函数，避免运行时错误
]);

export function StatusProvider({ children }: React.PropsWithChildren) {
  const value = React.useState("set a status");
  return (
    <StatusContext.Provider value={value}>
      {children}
    </StatusContext.Provider>
  );
}

2. 组件中正常使用Context

你的SetStatus组件代码无需修改，现在TypeScript能正确识别Context返回的是数组，解构不会再报错：

function SetStatus() {
  const [status, setStatus] = React.useContext(StatusContext);
  return (
    <input value={status} onChange={(e) => setStatus(e.target.value)} />
  );
}