狀態更改時React組件未更新

Question

我在登錄用戶時無法更新導航時遇到問題。

所以我App.js的一部分看起來像這樣；

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import Home from './views/Home';
import Login from './views/Login';
import Navigation from './components/Navigation';

function App() {
    return (
        <Router>
            <React.Fragment>

                <header className="header-global">
                    <Navigation />
                </header>

                <Route path="/" exact component={Home} />
                <Route path="/login" component={Login} />

                <Footer />

            </React.Fragment>
        </Router>
    );
}

export default App;

在我的Login.js文件中，我調用了我的API，檢查了有效的詳細信息，如果它們有效，那么響應將設置一個令牌，並且將value過期的內容存儲到localStorage中，然后重定向到首頁；

.then((response) => {
    // Set token here
    // set expires at here

    // redirect to homepage after successful login
    this.props.history.push("/");

所有這些都可以正常工作，但是在我的Navigation.js文件中，我想將鏈接從“ Login更改為“ Logout但是重定向后它不會自動執行此操作..我必須重新加載頁面才能看到“登錄”更改為“注銷”。

我有一個名為auth.js的單獨文件，該文件具有一個稱為isAuthenticated的函數，該文件基本上只是檢查令牌是否存在並有效，並根據此返回true或false。

這是我的Navigation.js文件（我已將其縮減為僅顯示所需內容），但是我沒有發現任何問題，並且我無法理解為什么重定向后它不會自動更改值。

import React, { Component } from 'react';
import auth from '../auth';

class Navigation extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: false,
        };
    }

    componentDidMount() {
        if ( auth.isAuthenticated() ) {
            this.setState({ isAuthenticated: true })
        }
    }

    render() {
        const { isAuthenticated } = this.state;

        return (
            { isAuthenticated ? 'Logout' : 'Login' }
        );
    }
}

export default Navigation;

我也嘗試過使用componentWillMount方法。

以下是auth.isAuthenticated代碼（已縮減）

isAuthenticated () {
    if (this.isExpired()) {
        return false
    }

    if (!this.getToken()) {
        return false
    }

    return true
}

Answer 1

您需要為Navigation添加道具history ：

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import Home from './views/Home';
import Login from './views/Login';
import Navigation from './components/Navigation';

function App() {
    return (
        <Router>
            <React.Fragment>

                <header className="header-global">
                    <Navigation />
                </header>

                <Route path="/" exact component={Home} />
                <Route path="/login" component={Login} />

                <Footer />

            </React.Fragment>
        </Router>
    );
}

export default App;

並在componentDidMount添加this.props.history.push("/") ：

import React, { PureComponent } from 'react';
import auth from '../auth';

class Navigation extends PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: false,
        };
    }

    componentDidMount() {
        if ( auth.isAuthenticated() ) {
            this.setState({ isAuthenticated: true });
            this.props.history.push("/");
        }
    }

    render() {
        const { isAuthenticated } = this.state;

        return (
            { isAuthenticated ? 'Logout' : 'Login' }
        );
    }
}

export default withRouter(Navigation);

例：