javascript - 如何修改 React 中 Bool 数组的值？

Question

我的组件中有一个 bool 数组作为状态。如果它是假的，我想将其设置为真。

this.state = {
       checkedPos: []
}

handleChange(index, reaction) {
   if (!this.state.checkedPos[index])
   {
      this.state.checkedPos[index] = true;
      this.addReaction(reaction);
      this.forceUpdate();
   }
}

它有效，但我遇到的唯一问题是它显示此警告:

Do not mutate state directly. Use setState()

所以我尝试改变它并把它写成这样:

this.setState({
 checkedPos[index]: true
})

但它根本无法编译。

Answer 1

一种解决方案是映射您所在州的前一个数组。由于您不应该在没有 setState 的情况下修改您的状态，因此我将向您展示如何在此解决方案中使用它:

handleChange(index) {
    this.setState(prev => ({
        checkedPos: prev.checkedPos.map((val, i) => !val && i === index ? true : val)
    }))
}

这里，仅当先前值为 false 并且索引为与提供的相同。否则，它返回已经存在的值。

然后，您可以在值更新后使用 setState 的第二个参数来执行函数:

handleChange(index) {
    this.setState(prev => ({
        checkedPos: prev.checkedPos.map((val, i) => !val && i === index ? true : val)
    }), () => {
        this.addReaction(reaction);
    })
}