如何用typescript传递一个数字数组并作出反应

Question

我第一次在React中使用Types，对它不是很熟悉。

我正在尝试将子组件中表单中的数字添加到数字数组中。

为此，我创建了一个useState钩子：

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

现在我正试图将setValuesList钩子传递给子组件：

<AddNum
setValues={setValuesList}
/>

在子组件中，我为道具定义了一个接口：

interface AppProps {
setValues: (value: number) => void;
}

然而，当我尝试调用setValues钩子时：

const addNumber = (value: string): undefined => {
const num = parseInt(value);
props.setValues((prevList) => prevList.concat(num));
return undefined;

}；

我在父组件中得到这个错误：

/Users/acandael/Tutorials/react/add-nums/src/components/AddNum.tsx
TypeScript error in /Users/acandael/Tutorials/react/add-nums/src/components/AddNum.tsx(21,21):
Argument of type '(prevList: any) => any' is not assignable to parameter of type 'number[]'.
Type '(prevList: any) => any' is missing the following properties from type 'number[]': pop, push, concat, join, and 27 more.  TS2345
19 |   const addNumber = (value: string): undefined => {
20 |     const num = parseInt(value);
> 21 |     props.setValues((prevList) => prevList.concat(num));
|                     ^
22 |     return undefined;
23 |   };
24 | 

有人知道我如何将子组件中的数字添加到父组件中的一组数字中，并保持TypeScript的正常运行吗？

感谢您的帮助

Answer 1

您正试图通过调用props.setValue(num)将数字数组的状态值更改为数字。

此外，接口AppProps中setValues的类型定义不正确。TS将把设置器函数setValuesList的类型推断为与类型(value: number) => void不兼容的React.Dispatch<SetStateAction<number[]>>。

如果您想将函数setValuesList作为道具传递，那么setValues函数的正确定义应该是

interface AppProps {
setValues: React.Dispatch<SetStateAction<number[]>>

// setValues: (numArr: number[]) => void  ( this will work as well )
}

更新valuesList的状态值的解决方案是使用函数更新或创建另一个回调函数，该函数接收number作为参数并更新状态。

功能更新

setValues(prev => prev.concat(num))

使用setValues作为不同的回调函数

// with this solution you don't need to modify the interface AppProps
interface AppProps {
setValues: (num: number) => void
}
const Foo: React.FC<AppProps> = ({ setValues }) => {

// component logic

return (
<>
</>
)
}
// in parent component
const [valuesList, setValuesList] = useState<number[]>([])
const updateWithNewValue = useCallback((num: number) => {
setValuesList(prev => prev.concat(num))
}, [])
// pass the updateWithNewValue as props
<Foo setValues={updateWithNewValue}/>

codesandbox中的类似示例