代码之家 › 专栏 › 技术社区 › Toontje

如何使用数组仅删除一个实例。原型过滤器()

react-hooks typescript reactjs

Toontje · 技术社区 · 4 年前

在我的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]

我猜是阵列。原型filter()不是正确的方法吗?

如何重写deleteNumberFromList方法,使其只删除一个数字的实例,而不是所有重复的实例?

谢谢你的帮助,

安东尼

4 回复 | 直到 4 年前

subashMahapatra 4 年前

一个示例代码段,函数 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))
}

Shadow 4 年前

下面是一个例子。试试这个:

let allValues = [2, 4, 2, 5];
let unique = allValues.filter( (value, index, self) => self.indexOf(value) === index );

Shadow 4 年前

const deleteNumberFromList = (num: number) => {
    setValuesList(valuesList=> {
       valuesList.splice(valuesList.indexOf(num),1);
       return valuesList;
    });
};

.indexOf(element)给出第一个匹配元素的索引。
.splice(索引,计数)根据从索引开始的计数删除元素的数量

torkel 4 年前

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 检查给定元素是否包含在列表中。如果元素不存在,我们就不需要更改它。如果存在,我们构造一个新的数组,这样就可以删除该索引。