Flow type error: "number [1] is incompatible with `Number` [2] in property `index`" - using React context

Question

使用 React 上下文，我认为它可能无法正常工作的原因是上下文文件中存在类型问题。问题说：

无法使用绑定到 defaultValue 的对象文字调用 createContext，因为数字 [1] 与属性 index 中的 Number [2] 不兼容。流（不兼容调用）

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

export type CountryIndexProviderType = {
  index: Number,
};

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

type CountryContextProviderProps = {
  index: Number,
};

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

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

export { CountryContext, CountryContextProvider, useCountryIndexContext };

组件 1：

import { CountryContextProvider } from "/EnteredCountriesContext";

return (
  <StyledWrappingContainer>
    <StyledProgress>{index + 2}</StyledProgress>
    <CountryContextProvider index={index}></CountryContextProvider>
  </StyledWrappingContainer>
);

组件 2：

import { useCountryIndexContext } from "/EnteredCountriesContext";
const { index } = useCountryIndexContext();

<StyledWrappingContainer>
   <StyledProgress>
      <StyledProgress>{index + 2}</StyledProgress>
   </StyledProgress>
</StyledWrappingContainer>

谁能看出我的问题所在？

Answer 1

你需要改变

index: Number,

成为

index: number,

一个Number是一个对象，number是一个原始类型。

Flow type error: "number [1] is incompatible with `Number` [2] in property `index`" - using React context

Flow type error: "number [1] is incompatible with `Number` [2] in property `index`" - using React context

javascript

reactjs

flowtype

react-context