在我的React应用程序中，我有一个方法deleteNumberFromList。此方法调用setter钩子并从数组中删除一个数字：
const [valuesList, setValuesList] = useState<number[]>([]);
const deleteNumberFromList = (num: number) => {
setValuesList(valuesList.filter((e) => e !== num));
};
这是有效的，但问题是，当我在列表中有重复的值时，它会删除该值的所有实例
所以当我有一个数组时：
[2,4,2,6]
我想从列表中删除一个数字2，结果将是[4,6]，而它应该是[4,2,6]
我想Array.prototype.filter((不是正确的方法吗？
如何重写deleteNumberFromList方法，使其只删除一个数字的一个实例，而不是所有重复的实例？
谢谢你的帮助，
Anthony
一个示例片段，函数removeFirstFoundval将数组和一个数字作为参数，并返回一个新数组，其中删除了该数字的第一个实例。
let nums = [2, 4 ,2 ,6]
let removeFirstFoundval = (arr, num) => {
const idx = arr.indexOf(num)
if (idx === -1) {
return [...arr]
}
return arr.filter((el, i) => i !== idx)
}
console.log(removeFirstFoundval(nums, 2))使用适合您的用例的适当类型。函数removeFirstFoundval不会改变状态，因此您可以在函数更新中使用它。
const removeFirstFoundval = (arr: number[], num: number): number[] => {
const idx = arr.indexOf(num)
if (idx === -1) {
return [...arr]
}
return arr.filter((el, i) => i !== idx)
}
const removeNumberFromList = (num: number) => {
setValuesList(prev => removeFirstFoundval(prev, num))
}
这里有一个例子。试试这个：
let allValues = [2, 4, 2, 5];
let unique = allValues.filter( (value, index, self) => self.indexOf(value) === index );
const deleteNumberFromList = (num: number) => {
setValuesList(valuesList=> {
valuesList.splice(valuesList.indexOf(num),1);
return valuesList;
});
};
- .indexOf(element(给出第一个匹配元素的索引
- .splice(index，count(根据从索引开始的计数删除元素的编号
const [valuesList, setValuesList] = useState<number[]>([]);
const deleteNumberFromList = (num: number) => {
const idx = valuesList.indexOf(num)
if (idx === -1) {
return setValuesList(valuesList)
}
const newList = valuesList.slice(0, idx).concat(valuesList.slice(idx+1))
setValuesList(newList);
};
indexOf检查给定元素是否包括在列表中。如果元素不存在，我们不需要更改它。如果它存在，我们构造一个新的数组，以便删除所述索引。