无法在React App中将新的键/值对动态添加到STATE JSON数组

Question

我试图将新的键值对添加到已加载的JSON数组。我正在添加新的键值对以自定义react bootstrap表中的标题列单元格，但出现以下错误。谁能帮忙吗？

处于以下状态的“列”是我要添加新的键值对的位置

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

使用JavaScript变量时需要声明它们。公共类语法不能在所有地方使用。您遇到的错误不言而喻-“未定义复选框”。 请参考使用方法：https://tylermcginnis.com/javascript-private-and-public-class-fields/

我只是在示例中声明了未声明的变量，并且代码起作用了。

Answer 2

首先，dcolumn和column中有一个错字。 对于not defined错误，您需要使用const进行定义。使用方式：

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