Javascript 是否从阵列中移除项目？

我正在制作一个表单，允许用户构建一个测验（这是到目前为止我的代码）

---

我已经到了我想要尝试并且能够“删除”一个问题的地步（使用一个按钮）。我的代码现在做的是将对象添加到数组中，我已经弄明白了这一点。但现在我正试图从数组中删除项目。我在想“好吧，删除最后一个问题”，但实际上用户会想删除他们的任何问题。我只是好奇是否有人对此有一些建议，我真的不知道如何开始。

如果您希望用户能够删除任何问题，请在问题

div

中添加

onClick

（或者div的子级-记住移动

onClick

）。的回调可以接受索引，该索引引用列表中要删除的元素

例如：

class App extends Component {
  constructor(props) {
    super(props)

    this.removeItem = this.removeItem.bind(this)
  }

  removeItem (index) {
    this.setState(({ questions }) => {
      const mQuestions = [ ...questions ]
      mQuestions.splice(index, 1)
      return { questions: mQuestions }
    })
  }

  render () {
    return (
      <div>
        ...
        { this.state.questions.map((question, index) => {
          return <div onClick={ () => this.removeItem(index) }>{ question }</div>
        }) }
      </div>
    )
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.removietem=this.removietem.bind（this）
}
删除项目（索引）{
this.setState（（{questions}）=>{
常量mQuestions=[…问题]
mQuestions.splice（索引，1）
返回{问题：mQuestions}
})
}
渲染（）{
返回(
...
{this.state.questions.map（（问题，索引）=>{
返回此.removietem（index）}>{question}
}) }
)
}
}

这与其说是一个反应问题，不如说是一个JavaScript问题。由于您的问题存储在react状态中，因此当该状态被修改时，它将更新DOM。只需使用

this.setState（）

从数组中删除值即可

有几个选项可用于从数组中删除值。这里要记住的主要事情是确保不修改实际的数组，而是用数组的新实例替换它。直接修改数组不会触发更新，这违反了react state的一般原则。例如，使用

Array.prototype.splice（）

将修改原始数组。 （）

在JavaScript中，字符串和数字等参数是通过值传递的，而数组、集合或通用JavaScript对象等对象是通过引用传递的。这意味着，通过将一个对象分配给一个新变量，您现在将有两个变量指向同一个对象

const foo = [1];
const bar = foo;
console.log(foo); // [1]
console.log(bar); // [1]
foo.push(2);
console.log(foo); // [1, 2]
console.log(bar); // [1, 2]

解决此问题的一种常见方法是使用ES6扩展表示法（）将值扩展到新数组中

constbar=[…foo]

将返回指向单独对象的复制数组。将此应用于您的问题，您可以执行

const q=[…this.state.questions]

，然后使用

q.splice（index，1）

修改q，并使用

this.setState（）

将其分配给您的状态。显然，从数组中删除项还有其他选择，我想您不一定知道数组的索引。在这种情况下，诸如

Array.prototype.find（）

或

Array.prototype.findIndex（）

之类的工具非常有用，或者您可以使用JavaScript映射对象（）代替数组，以消除对索引的需要，同时保持问题顺序。所有这些选项都是同样有效的，所以我将把它留给你来决定你想如何去做

---

为了真正触发删除，您需要在页面上具有某种用户控制。您可以通过单击元素上的侦听器、HTML中包含的每个问题的特定按钮，或者甚至是其他地方的下拉菜单来删除这些内容。最终结果是，用户与之交互的元素将保持一个唯一的ID，这样当它激活回调函数时，您就可以确定应该删除哪个问题。此ID将存储在函数的第一个参数中。在大多数示例中，这将被命名为“事件”。

slice

使用

begin

ning和

end

args，而不是

start

/

count

“您仍在改变状态”，这就是我使用扩展语法创建副本的原因。“您不同意吗？”是的，我同意。同样，我在

this.setState

回调中进行局部变异，但不返回原始的变异状态-我使用

[…questions]

创建了一个副本。我习惯于使用漂亮的不可变库，比如

immutablejs

——这种普通的JS业务让人筋疲力尽：P

const foo = [1];
const bar = foo;
console.log(foo); // [1]
console.log(bar); // [1]
foo.push(2);
console.log(foo); // [1, 2]
console.log(bar); // [1, 2]