Reactjs React-Typescript解构提供程序值

在我上一篇文章中有一位成员建议如何将

setState

传递给context API的子级之后，我得到了以下代码：

export interface IShowProviderProps {
    shows: IShow[];
    setShows: (currentShows: IShow[], shows: IShow[]) => void;
    sort: string;
    setSort: (sort: string) => void;
    query: string;
    setQuery: (sort: string) => void;
    showType: string;
    setShowType: (sort: "movie" | "tv") => void;
    page: number;
    setPage: (page: number) => void;
}

export const ShowContext = createContext<IShowProviderProps | null>(null);

export const ShowProvider = ({ children }: Props): JSX.Element => {
    const [shows, setShows] = useState<IShow[]>([]);
    const [sort, setSort] = useState<string>("popularity.desc");
    const [query, setQuery] = useState<string>("");
    const [showType, setShowType] = useState<"movie" | "tv">("movie");
    const [page, setPage] = useState<number>(1);

  const providerValue: IShowProviderProps = {
        shows,
        setShows,
        sort,
        setSort,
        query,
        setQuery,
        showType,
        setShowType,
        page,
        setPage
    };

 return <ShowContext.Provider value={providerValue}>{children}</ShowContext.Provider>;

export const useShows = () => useContext(ShowContext);

我得到一个错误：

类型IShowProviderProps上不存在属性“shows”| null

我必须这样做：

 const providerValues = useShows();

然后

providerValues？。显示

（没有？我可能得到空值）

---

我该怎么办？感谢

这里的问题是，您的上下文介于

IShowProviderProps

和

null

：

/* The "IShowProviderProps | null" means that the value can be of type
   IShowProviderProps or type null */
export const ShowContext = createContext<IShowProviderProps | null>(null);

这里的一个解决方案是简单地将上下文的值类型定义为

IShowProviderProps

：

/* Removing "| null" causes TypeScript to now consider the value type of 
   ShowContext to be non-nullable, ie always defined */
export const ShowContext = createContext<IShowProviderProps>(null);

---

希望有帮助

我不使用TypeScript，所以我的答案可能不太准确，但这行

const ShowContext = React.createContext<IShowProviderProps>({} as IShowProviderProps);

const ShowContext=React.createContext（{}作为IShowProviderProps）；

解决了这个问题。问题在于，由于

providerValues

可以是

null

，TS编译器假定

null

必须具有

显示

，而它显然没有

这个逻辑没有错。我假设

IShowProviderProps | null

是一种解决方法，当您将

null

作为初始值传递时，它可以使TS编译器保持沉默

我把你所有的代码都放进了一个，看看这个，一切正常

---

顺便说一句，我相信

setShows:（currentShows:IShow[]，shows:IShow[]）=>void对于
setShows
是错误的签名。它只接受
IShow
或
IShow=>IShow
的参数，而不是两个。
providerValues
是一个对象，而不是数组，因此解构应该是
const{shows，setShows}=useShows（）是的，我用{}做了这个，在我的帖子中输入错误，对不起，编辑了严格的错误作品，但我想问，这是一个好的做法设置为错误吗？这是更好的方法吗？也许user3272018的答案是更好的实践？
strict:false
并不少见，但是在大多数情况下，最好是有符合TypeScripts“strict”键入标准的代码库谢谢，是的，我已经更改了设置，但谢谢：）
/* Removing "| null" causes TypeScript to now consider the value type of 
   ShowContext to be non-nullable, ie always defined */
export const ShowContext = createContext<IShowProviderProps>(null);

{
  "compilerOptions": {
    ...

    "strict": false,

    ...
  },
  ...
}

const ShowContext = React.createContext<IShowProviderProps>({} as IShowProviderProps);