Как присвоить значение постоянной словаря и сохранить в состоянии? - PullRequest
Новая
       13

Как присвоить значение постоянной словаря и сохранить в состоянии?

1 голос
/ 01 марта 2020

Я новичок, чтобы реагировать, и я пытаюсь получить данные из API, а затем назначить данные для константы dict. После этого я хотел бы загрузить dict в настроенную таблицу и показать эти данные. Я хочу сделать что-то вроде data.Table.FIRST_TABLE.data = response.data.data, намереваясь присвоить data, извлеченный из post API, диктанту 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>
            );
        }
    }

1 Ответ

7 голосов
/ 01 марта 2020

вы должны учитывать, что в 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>
                        );
                    }
                }
...