Ionic React项目中React Context搭配对象/数组使用的类型报错如何解决？

问题原因 #

你的报错是因为React.createContext的默认值类型和Provider实际传入的value类型不匹配导致的：

1. 初始创建Context时你给label字段的默认值是空对象{}，但你在App.tsx中定义的label状态是Label[]数组类型，AgGrid的rowData也要求传入数组，类型不一致触发TS报错。
2. 你后续修改的label: Label[]是错误写法：Label[]是TS类型声明，不能直接作为JS值赋值，运行时不会生效，也不符合语法要求。

解决步骤 #

1. 改造LabelContext为TS文件，明确类型定义

将LabelContext.js重命名为LabelContext.ts，按如下写法定义：

import React, { createContext, useContext } from 'react';
import Label from '../models/label';

// 先声明Context的结构类型
interface ILabelContext {
  label: Label[];
  updateLabel: (newLabel: Label[]) => void;
}

// 创建Context时指定泛型，默认值和类型严格对齐
export default React.createContext<ILabelContext>({
  label: [], // 初始值用空数组，和App中状态的初始值保持一致
  updateLabel: () => {} // 空函数作为默认的更新方法占位
});

2. 可选：封装自定义Hook避免使用异常

如果有组件可能在LabelContext.Provider外部使用，你可以给useContext加一层自定义Hook做校验，避免误用到默认值：

// 同样写在LabelContext.ts里
export function useLabelContext() {
  const context = useContext(LabelContext);
  if (!context) {
    throw new Error('useLabelContext必须在LabelContext.Provider内部使用');
  }
  return context;
}

后续消费组件直接调用useLabelContext()即可，不需要再单独写useContext(LabelContext)。

修改完成后类型就会完全匹配，报错就会消失。

内容的提问来源于stack exchange，提问作者Sylvain