首页 > 解决方案 > 无法将新的键值对动态添加到 React App 中的状态 JSON 数组

问题描述

我正在尝试向已加载的 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() 以查看问题

标签: jsonreactjsreact-bootstrap-table

解决方案


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

我只是在您的示例中声明了未声明的变量,并且代码有效。


推荐阅读