如何将 setter hook 传递给子组件并满足 TypeScript

Question

我想将 setter 挂钩 (setValuesList) 从父组件 (App.tsx) 传递到子组件 (AddNumber.tsx)

我在父组件中定义了钩子，如下所示：

const [valuesList, setValuesList] = useState<number[]>([]);

我想将钩子传递给子组件，如下所示：

<AddNumber valuesList={valuesList} setValuesList={setValuesList} />

但是我收到打字稿错误：

(JSX attribute) AppProps.setValuesList: (num: number) => void
Type 'Dispatch<SetStateAction<number[]>>' is not assignable to type '(num: number) => void'.
  Types of parameters 'value' and 'num' are incompatible.
    Type 'number' is not assignable to type 'SetStateAction<number[]>'.ts(2322)
AddNumber.tsx(5, 3): The expected type comes from property 'setValuesList' which is declared here on type 'IntrinsicAttributes & AppProps'

在子组件中，我为 props 定义一个接口，如下所示：

interface AppProps {
  valuesList: number[];
  setValuesList: (num: number) => void;
}

有人看到我在这里做错了什么吗？

我的存储库位于： https: //github.com/acandael/number-list

感谢您的帮助，

安东尼

Answer 1

useState这是钩子的类型定义

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

因此，如果在调用 setter 函数的类型number[]时传递状态值的useState类型将是React.Dispatch<SetStateAction<number[]>>

import { SetStateAction } from 'react';

// this interface will satisfy if you want to pass setValuesList directly
interface AppProps {
  valuesList: number[];
  setValuesList: React.Dispatch<SetStateAction<number[]>>;
 
  // setValuesList: (val: number[]) => void  will also satisfy, but it is
  // better to be explict and pass React.Dispatch<SetStateAction<number[]>>
}

如果您不想修改接口，您可以创建并传递另一个函数。

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];