类型'boolean‘不能指定为键入'boolean[]’

Question

我想在基于布尔数组的制表符之间创建一个开关。但是，我不知道如何替换switchTabs函数以阻止显示此错误。接口的构建方式如下：

interface IData {
    setData: boolean[];
}

我的构造函数如下所示：

  constructor(props: IData) {
        super(props);
        this.state = {
            setData: [true, false, false]
        }
    }

但是，发生错误的方法(不能将“布尔型”指定为“boolean[]”)如下所示：

 private switchTabs() {
        this.setState({ setData: !this.state.setData});
    }

Answer 1

per @evolutionxbox评论：

​

private switchTabs() {
        this.setState({ setData: this.state.setData.map( x=>!x});
    }

​

使用.map将对数组中的每个元素应用一个函数。这是一个很好的，整洁的符号。这是反转数组中的每个布尔值。不过，我不太确定如果数组包含非布尔元素会发生什么。

Answer 2

您正在拒绝计算为false的布尔!this.state.setData数组。从而抛出那个错误。

相反，您应该创建数组的副本并修改所需的索引。

private switchTabs(tabIndex) {
        const newData = [...this.state.setData]; //copying the array
        newData[tabIndex] = !newData[tabIndex];
        this.setState({ setData: newData});
    }