Невозможно динамически добавить новую пару ключ-значение в массив STATE JSON в приложении React

Question

Я пытаюсь добавить новую пару ключ-значение в уже загруженный массив JSON.Я добавляю новую пару ключ-значение для настройки ячеек столбца заголовка в таблице начальной реакции, но получаю следующие ошибки.Может ли кто-нибудь помочь, пожалуйста?

«Столбцы» в приведенном ниже состоянии, где я хотел добавить новую пару ключ-значение

state = {
        data: MYResult.Products || [],
        actualData: MYResult.Products || [],
        columns: MYResult.ParametricList_Attributes || [],
        isCompareClicked: false,
        isDisabled: true,
        selected: []
    };

Вот как я добавляю пару ключ-значение -

componentDidMount(){


        checkbox = (column, colIndex) => {
            return (
                <h5>{ column.text }<checkbox/></h5>
            );
        }
        console.log(this.state.columns) ;
        newColumn = this.state.columns.map((column) => {

            return {...column, headerFormatter: checkbox};
        });
        this.setState({columns: newColumn });
    }

Полный код здесь - https://codesandbox.io/s/o1r988qkz Пожалуйста, раскомментируйте componentDidMount (), чтобы увидеть проблему

Answer 1

Во-первых, есть опечатка в dcolumn и column.А что касается ошибки not defined, вам нужно определить ее, используя const.Используйте как:

const checkbox = (column, colIndex) => {
      return (
        <h5>{column.text}<checkbox /></h5>
      );
    }

Answer 2

Переменные JavaScript должны быть объявлены, когда они используются.Синтаксис открытого класса не может использоваться везде.Ошибка, которую вы получаете, самоочевидна - «флажок не определен».Вот как это использовать: https://tylermcginnis.com/javascript-private-and-public-class-fields/

Я просто объявил необъявленные переменные в вашем примере, и код сработал.