无法将新的 key-value 对动态添加到 React App 中的 STATE JSON 数组

Question

我正在尝试向已加载的 JSON 数组添加新的 key-value 对。我正在添加新的 key-value 对以自定义反应 bootstrap table 中的 header 列单元格，但出现以下错误。任何人都可以帮忙吗？

'Columns' 下面的状态是我想添加新的 key-value 对

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

这就是我添加 key-value 对 -

的方式

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变量在使用的时候需要声明。 Public class 语法不能到处使用。你得到的错误是不言而喻的 - 'checkbox is not defined'。参考这个关于如何使用它：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>
      );
    }

无法将新的 key-value 对动态添加到 React App 中的 STATE JSON 数组

Unable to add new key-value pair dynamically to a STATE JSON Array in React App

json

reactjs

react-bootstrap-table