如何为字典常量赋值并存储在状态中？

Question

我是新手，我正在尝试从 api 获取数据，然后将数据分配给 dict 常量。之后，我想将字典加载到自定义表中并显示这些数据。我想做的是做类似data.Table.FIRST_TABLE.data = response.data.data 的事情，打算将从post API 获取的data 分配给data 字典。提前感谢您帮助我。代码如下：

    let data = {
        Table:{
            'FIRST_TABLE':{
                settings: {
                    colOrder: ['first_col', 'second_col'],
                },
                columns:{
                    'first_col':{
                        visible: true,
                    },
            'second_col':{
                        visible: true,
                    },
                },
                data:[],
            },
        },
    }

    class MainLayout extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
            this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleSubmit = e => {
            e.preventDefault();
        axios
          .post('http://localhost:4000/api/loadData/')
                .then(function(response){
                    data.Table.FIRST_TABLE.data = response.data.data //stick data to data dict
                })
          .catch(err => {
            console.error(err);
          });
        };
        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                <input 
                   type="submit" 
                   value="Check Mapping" 
                   onClick={this.onSubmit}
                />
                <CustomTable state={data}> 
           //data dict define the table structure and data presenting
                    <Table />
                </CustomTable>
                </form>
            );
        }
    }

Answer 1

你应该考虑到在 React 渲染中可以使用状态

如果使用箭头函数，则不需要使用绑定

测试这段代码：

    class MainLayout extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
    data : {
            Table:{
                'FIRST_TABLE':{
                    settings: {
                        colOrder: ['first_col', 'second_col'],
                    },
                    columns:{
                        'first_col':{
                            visible: true,
                        },
                'second_col':{
                            visible: true,
                        },
                    },
                    data:[],
                },
            },
        }};                   }

                handleSubmit = e => {
                    e.preventDefault();
                axios
                  .post('http://localhost:4000/api/loadData/')
                        .then(response => {
                            const data={...this.state.data}
                            data.Table.FIRST_TABLE.data = response.data.data
                            this.setState({ data })
 //stick data to data dict
                        })
                  .catch(err => {
                    console.error(err);
                  });
                };
                render() {
                    return (
                        <form onSubmit={this.handleSubmit}>
                        <input type="submit" value="Check Mapping" />
                            <CustomTable state={this.state.data}> //data dict 
            define the table structure and data presenting
                                <Table />
                            </CustomTable>
                            </form>
                        );
                    }
                }