如何使用TypeScript和React从数字数组中删除数字

Question

我有一个父组件(App.tsx(。在这个组件中，我定义了一个钩子，用来保存和设置一组数字：

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

对于以前的子组件(AddNumber.tsx(，我定义了一个函数，将数字添加到数字数组中：

const addNumberToList = (num: number) => {
setValuesList((prev) => prev.concat(num));
};

然后我将函数传递给子组件。效果很好。

然而，现在我需要创建一个函数来从数组中删除一个数字。

现在有人知道如何实现这个功能吗？

在以前的一个应用程序中，我实现了从列表中删除一个数字，如下所示：

setValuesList(valuesList.filter((e) => e !== value));

但因为我使用的是TypeScript，所以我不能再这样做了，因为我需要将deleteNumberFromList方法传递给子组件(NumberList.tsx(

谢谢你的帮助，

Anthony

Answer 1

这将非常相似，创建一个以数字为参数的新函数，并在从valuesList中删除数字后更新状态。

const removeNumberFromList = (num: number) => {
setValuesList((prev) => prev.filter(el => el !== num))
}
// can be called like removeNumberFromList(10)
// or can be passed as onClick={() => removeNumberFromList(10)}

类型定义与几乎相同

interface AppProps {
addNumberToList: (num: number) => void;
removeNumberFromList: (num: number) => void;
}

Answer 2

您仍然可以使用filter位代码，只需添加类型即可：

setValuesList((prev) => prev.filter((e:number) => e !== value));