Question

我的组件中有一个布尔数组作为状态。如果为假，我想将其设置为true。

this.state = {
       checkedPos: []
}

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

它可以工作，但是我遇到的唯一问题是它显示了以下警告：

请勿直接更改状态。使用setState（）

所以我尝试将其更改并按以下方式放置：

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

但是它根本不编译。

Answer 1

您可以为此使用功能setState。

this.setstate((prevState) => ({
    const checkedPos = [...prevState.checkedPos];
    checkedPos[index] = true
    return { checkedPos };
}))

Answer 2

一种解决方案是在您的状态下map前一个数组。由于没有setState，您永远都不能修改状态，因此我将向您展示如何在此解决方案中使用它：

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

在这里，map仅在前一个值为true且索引与提供的索引相同的情况下，才将数组元素的值更改为false。否则，它将返回已经存在的值。

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

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

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

2 个答案: