代码之家 › 专栏 › 技术社区 › defectivepixel

React上下文不更新

state reactjs javascript

defectivepixel · 技术社区 · 6 年前

这是我的代码:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Axios from 'axios';

import './assets/css/bootstrap.min.css';
import './assets/css/main.css';

import Default from './default';
import Login from './login';
import PrivateRoute from './private-route';

import UserInfo from './user-info';

class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            user: {}
        }
    }

    componentDidMount = () => {
        const token = localStorage.getItem('token');
        if (token) {
            Axios.get('/getuser', {
                headers: {
                    "Authorization": "Bearer " + token
                }
            }).then(res => {
                if (res.data) {
                    this.setState({ user: res.data });
                }
            }).catch(err => {
                console.log('err login: ', err);
                localStorage.clear();
                // delete storage
            });
        }
    }

    render() {
        console.log(this.state.user);
        return (
            <Router>
                <div>
                    <UserInfo.Provider value={this.state.user}>
                        <Route exact path="/login/:token" component={Login} />
                        <Route exact path="/" component={Default} />
                        <PrivateRoute exact path="/protected" component={() => <div>Protected</div>} />
                    </UserInfo.Provider>
                </div>
            </Router>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

问题是,当axios返回数据并更新状态时,上下文不会更新。状态不更新,但上下文不更新。

{}

{}

{id:1,人名:“majid”,}

1 回复 | 直到 6 年前

Leri Gogsadze 6 年前

让我们使用一些技巧,不要渲染任何东西,直到没有回应来!!

class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            user: {},
            mounted: false
        }
    }

    componentDidMount = () => {
        const token = localStorage.getItem('token');
        if (token) {
            Axios.get('/getuser', {
                headers: {
                    "Authorization": "Bearer " + token
                }
            }).then(res => {
                if (res.data) {
                    this.setState({ user: res.data, mounted: true });
                }
            }).catch(err => {
                console.log('err login: ', err);
                localStorage.clear();
                // delete storage
            });
        }
    }

    render() {
        if (!this.state.mounted) {
          return <div>Loading...</div>
        }

        return (
            <Router>
                <div>
                    <UserInfo.Provider value={this.state.user}>
                        <Route exact path="/login/:token" component={Login} />
                        <Route exact path="/" component={Default} />
                        <PrivateRoute exact path="/protected" component={() => <div>Protected</div>} />
                    </UserInfo.Provider>
                </div>
            </Router>
        )
    }
}