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

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

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

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

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

但是现在我需要创建一个函数来从数组中删除一个数字

现在有人知道如何实现该功能了吗

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

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

但是因为我使用的是TypeScript，我不能再这样做了，因为我需要将deleteNumberFromList方法传递给childcomponent（NumberList.tsx）

谢谢你的帮助

---

Anthony

您仍然可以使用

过滤器

位代码，您只需向其中添加类型：

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

---

类似的情况是，创建一个新函数，将数字作为参数，并在从

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;
}

---

谢谢@subashMahapatra，这很有效！我试过类似的方法，但忘了调整界面。这能回答你的问题吗？