使用React Context在组件间传值时createContext报类型不兼容错误如何解决？

无法将对象字面量绑定到defaultValue来调用createContext，因为index属性中的number [1]与Number [2]不兼容。

该报错属于Flow类型系统的类型不匹配问题：

• Flow中首字母大写的Number对应JavaScript的Number包装对象类型，仅匹配new Number(xxx)创建的实例
• 你代码中传入的默认值0、组件传递的index变量都是原始数值类型，对应的Flow类型为小写的number，二者不兼容导致报错。

修改Context定义文件中的两处类型声明，将大写Number替换为小写number即可：

// @flow
import React, { createContext, useContext } from "react";

export type CountryIndexProviderType = {
  index: number, // 此处改为小写number
};

const CountryContext = createContext<CountryIndexProviderType>({
  index: 0,
});

type CountryContextProviderProps = {
  index: number, // 此处改为小写number
};

const CountryContextProvider = ({ index }: CountryContextProviderProps) => {
  return <CountryContext.Provider value={{ index }}></CountryContext.Provider>;
};

const useCountryIndexContext = () => useContext(CountryContext);

export { CountryContext, CountryContextProvider, useCountryIndexContext };

你当前代码中的CountryContextProvider没有包裹任何子组件，消费Context的第二个组件如果不在Provider的子组件树内，只会拿到Context的默认值，无法获取你传入的动态index值。需要调整嵌套结构，将消费组件放到Provider内部：

// 设置index的组件修改后结构
import { CountryContextProvider } from "/EnteredCountriesContext";

return (
  <StyledWrappingContainer>
    <StyledProgress>{index + 2}</StyledProgress>
    <CountryContextProvider index={index}>
      {/* 所有需要消费该Context的组件都要放在Provider标签内部 */}
      <ConsumerComponent />
    </CountryContextProvider>
  </StyledWrappingContainer>
);

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