时间戳

首页 > 解决方案 > 如何在 React 中删除对象数组中的多个项目？

javascript - 如何在 React 中删除对象数组中的多个项目？

问题描述

我有一个带有对象数组的 React 应用程序。我使用一种方法首先获取对象 id 列表，然后通过将它们与 id 列表进行比较来删除数组中的元素。问题是，该函数产生了错误的输出。

这是功能

var questionsToRemove = [3,5,6,7];

state.questionsData = [
    { order: 1, question: "q1" },
    { order: 2, question: "q2" },
    { order: 3, question: "q3" },
    { order: 4, question: "q4" },
    { order: 5, question: "q5" },
    { order: 6, question: "q6" },
    { order: 7, question: "q7" },
];

removeQuestion = () => {
    var questionssData = this.state.questionsData
    questionssData.forEach(each => {
        if (questionsToRemove.includes(each.order)) {
            questionssData.splice(questionssData.indexOf(each))
        }
    });
    this.setState({ questionsData: questionssData })
}

上述方法产生错误的输出为

    { order: 1, question: "q1" },
    { order: 2, question: "q2" },
    { order: 4, question: "q4" },
    { order: 6, question: "q6" },

我尝试了ES6过滤方法如下

removeQuestion = () => {
    var questionssData = this.state.questionsData
    questionssData.filter(each => {
        return questionsToRemove.includes(each.order)
    });
    this.setState({ questionsData: questionssData })
}

但这会产生相同的原始数组而不过滤任何内容。如何从数组中删除选定的对象？

标签： javascriptreactjs

解决方案

您必须将过滤器结果数组分配给您的变量。此外，为了过滤（删除），您必须从您的方法中返回 false ：

removeQuestion = () => {
    var questionssData = this.state.questionsData
    questionssData = questionssData.filter(each => {
        return !questionsToRemove.includes(each.order)
    });
    this.setState({ questionsData: questionssData })
}

推荐阅读