通用道具：为什么这些类型不兼容？

Question

我有两个带有带有通用参数TVariables的道具的 React 组件。 这些道具具有以下字段：类型TVariables的variables和类型为(vars: TVariables) => void setVariables setVariables。

当我像这样使用我的组件时：

const [variables, setVariables] = useState({ ...someProperties })

<A variables={variables} setVariables={setVariables}/>

我希望组件A能够推断出TVariables ，因此这两个道具都可以工作。 但是设置setVariables时出现不兼容错误。

这个描述非常晦涩，而且 typescript 错误报告更多，所以我创建了一个极简的代码框演示：

代码沙盒链接

为什么会出现这些错误，我该如何解决？ 谢谢你。

Answer 1

您应该为 setVariables 使用类型React.Dispatch<React.SetStateAction<TVariables>> setVariables

Set state functions in React can passed the new value for the state variable, but can also be passed a callback function that updates the state variable. 因此类型(variables: TVariables) => void与 React 集 state function 的类型不匹配。

Answer 2

似乎 Typescript 抱怨因为您在初始 state 中声明的这两个变量

test: "demo",
sortOrder: -1,

如果将它们添加到ListVariables ，错误就会消失：

type ListVariables = {
  limit: number;
  page: number;
  test: string;
  sortOrder: number;
};