Question

这就是我想做的：

我编写了一个将输入值作为参数的函数。

<input onChange={this.toggleReason} className="form-check-input" type="checkbox" id="inlineCheckbox1" value={rfl} />

然后，它触发执行此操作的以下函数：它检查状态（最初是数组）中输入值的存在。如果值已经在数组中==>删除该值，否则，如果该值不在数组中==>将值添加到数组中。

this.state = {
  selectedReasonsForLeaving: [] // initial state
}

  toggleReason = e => {
    console.log(typeof this.state.selectedReasonsForLeaving);
    const toggler = this.state.selectedReasonsForLeaving.find(elem => {
      return elem === e.target.value}
    );
    if (toggler !== e.target.value) {
      this.setState({selectedReasonsForLeaving: this.state.selectedReasonsForLeaving.push(e.target.value)}
    );
    } else {
      this.setState({selectedReasonsForLeaving: this.state.selectedReasonsForLeaving.filter(elem => elem !== toggler)}
    );
    }
    console.log(this.state.selectedReasonsForLeaving);
  }

当第一次触发该函数时效果很好，但是第二次触发该函数时，出现以下错误：

TypeError: _this.state.selectedReasonsForLeaving.find is not a function

为此行：const toggler = this.state.selectedReasonsForLeaving.find({ ... })

请注意，console.log(typeof this.state.selectedReasonsForLeaving);第一次输出object，但是第二次输出number。

如何更改我的功能以使其正常工作？

Answer 1

push返回推入数组的元素数。您可以执行以下操作：

代码

if (toggler !== e.target.value) {
    this.state.selectedReasonsForLeaving.push(e.target.value)
    this.setState({
        selectedReasonsForLeaving: this.state.selectedReasonsForLeaving
    });
}

但是不建议直接修改状态。因此，只需使用concat，它将返回一个新数组：

代码

if (toggler !== e.target.value) {
    this.setState({
        selectedReasonsForLeaving: this.state.selectedReasonsForLeaving.concat(e.target.value)
    });
}

Here是concat的正式引用。

让我知道这是否对您有用。

Answer 2

数组上的

push方法在将值附加到数组后返回数组的长度，因此会出现此错误。改用concat

this.setState({
    selectedReasonsForLeaving: this.state.selectedReasonsForLeaving.concat([e.target.value])
})

在React中更新后的状态类型更改

2 个答案:

代码

代码