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

Question

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

这是 function

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

上述方法产生错误的 output 为

    { 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 })
}

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

Answer 1

Array 的方法.filter不会改变数组，它会创建一个具有过滤值的新数组。 只需将过滤器的结果分配给questionssData 。

 questionssData = questionssData.filter(each => {
      return !questionsToRemove.includes(each.order)
 });

Answer 2

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

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