Typescript React createContext 和 useState

Question

我是 TS 的新手，正在尝试更新我从前员工那里继承的代码。我知道它与 TS 相关，并且尝试了不同类型但无法解决它。任何帮助都会很棒。提前致谢。

这是代码：

import React from 'react';

export interface HistoryType {

  history?: number;

  setHistory: (value: number) => void;

}

const HistoryContext = React.createContext<HistoryType | undefined>(undefined);

export const HistoryProvider: React.FC = ({ children }) => {

  const [history, setHistory] = React.useState();

  return (

    <HistoryContext.Provider value={{ history, setHistory}}>

      {children}

    </HistoryContext.Provider>

  );

};

export const useHistoryState = () => {

  const context = React.useContext(HistoryContext);

  if (context === undefined) {

    throw new Error('useHistoryState error');

  }

  return context;

};

错误截图：

https://i.stack.imgur.com/YKbri.png

Answer 1

const [history, setHistory] = React.useState()由于此处未指定类型，因此打字稿必须尝试推断它。它看到undefined被隐式传递给 use state，因此它假设状态是（并且永远是）undefined。那么这意味着setHistory期望能够通过undefined。您需要自己指定类型，以表示它可以是数字，也可以是未定义的：const [history, setHistory] = React.useState<number | undefined>();或者，如果它始终应该是一个数字，您也可以这样做，但您需要提供一个数字的初始值：const [history, setHistory] = React.useState<number>(42);PS：这与您的问题无关，但我注意到这段代码使用了一个常见错误：您在每次渲染上创建一个全新的对象并将其作为上下文值传递。value={{ history, setHistory }}>由于每次渲染都有一个新值，因此即使历史记录和 setHistory 没有更改，它也会强制消耗上下文的任何内容重新渲染。要解决此问题，您应该记住该值，以便仅在实际更改时重新计算它：&nbsp; const value = React.useMemo(() => {&nbsp; &nbsp; return { history, setHistory };&nbsp; }, [history]);&nbsp; return (&nbsp; &nbsp; <HistoryContext.Provider value={value}>&nbsp; &nbsp; &nbsp; {children}&nbsp; &nbsp; </HistoryContext.Provider>&nbsp; );