Невозможно изменить состояние скрытого столбца с true на false в setState

Question

Я использую таблицу Reve devexpress, и вы можете скрывать и отображать столбцы через состояние.

Я хотел бы изменить состояние скрытого с истинного на ложное, но я получаю ошибку Uncaught Invariant Violation.

Я пытался использовать setState, но не работает.

class ResultsTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
        columns: [
            { name: 'agent', title: 'Agent' },
            { name: 'alertGroup', title: 'Alert Group', hidden:true },
            { name: 'manager', title: 'Manager', hidden:true }
            ],
        };
    }


    componentDidMount() {
        this.testAlert();
    }

    testAlert = () => {
        if (this.props.alertgroupColumn()) {
            this.setState({
                columns: [{ name: 'alertGroup', title: 'Alert Group', hidden:false }]
            })
        }
    }

Значение Hidden должно измениться с true на false.

Answer 1

У меня есть другая альтернатива для обновления вашего состояния

  class ResultsTable extends Component {
        constructor(props) {
            super(props);
            this.state = {
            columns: [
                { name: 'agent', title: 'Agent' },
                { name: 'alertGroup', title: 'Alert Group', hidden:true },
                { name: 'manager', title: 'Manager', hidden:true }
                ],
            };
        }


        componentDidMount() {
            this.testAlert();
        }

        testAlert = () => {
            if (this.props.alertgroupColumn()) {
//---- get the columns from state 
   let columns = JSON.parse(JSON.stringify(this.state.columns))
 columns[1].hidden = false
 this.setState({
      columns:columns 
    })  
                this.setState({
                    columns: [{ name: 'alertGroup', title: 'Alert Group', hidden:false }]
                })
            }
        }