Question

我有一个包含“注销”按钮的组件，该按钮从localStorage删除一些变量，然后更新组件状态。更新状态后，它似乎并未触发渲染。

我使用状态来渲染注销按钮或来自react-router的<Redirect/>组件。

我将方法放在按钮的onClick事件上，并使用.bind(this)来保留上下文。

即使我从this.forceUpdate()回调中调用setState，更改状态时，该组件也似乎没有重新渲染。

我可能做错了什么吗？

import React, { Component } from "react";
import {NavLink, Redirect} from 'react-router-dom';
import ProtectedRoute from "../hoc/ProtectedRoute";
import Explain from "./Explain";
import User from "../util/User";
import Environment from "./Environment.js";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: true};
    }

    logout(){
        User.erase();
        this.setState({loggedIn: false}, () => {
            console.log("is logged in true? ", this.state.loggedIn === true);
            this.forceUpdate(() => { console.log("forcupdate complete") });
        });
    }

    render(){
        return <div className="authenticated">
            <nav className="navigation-bar">
                <div className="nav-grp">
                    <NavLink activeClassName="active" to="/home/explain">Explain</NavLink>
                    <NavLink activeClassName="active" to="/home/environment">Environment</NavLink>
                </div>
                <div>
                    { this.state.loggedIn === true ? "In" : "Out" }
                    { this.state.loggedIn === true
                        ? <a onClick={this.logout.bind(this)}>Logout</a>
                        : <Redirect from="/home" to="/register"/>
                    }
                </div>
            </nav>
            <div className="view container">
                <ProtectedRoute path={["/home/explain/:explain","/home/explain"]} authorized={User.registered()} component={Explain}/>
                <ProtectedRoute path="/home/environment" authorized={User.registered()} component={Environment}/>
            </div>
        </div>
    }
}

export default Home;

从以上所述，我希望在进入此组件后看到“输入”和一个注销按钮。单击后，我希望将其重定向回位于/register url的组件。相反，它看起来好像没有任何渲染，因为我继续看到注销按钮，并且未重定向到任何地方。

您可以在上方看到我在console.log和setState回调中都放置了forceUpdate。作为记录，“是否已登录？”消息打印，但“ forceUpdate complete”消息不打印。

感谢您的帮助！

Answer 1

这在我身上。我们重定向到/register的组件似乎正在将我们重定向回到/home，即上面的组件。我将重构用户会话的处理方式，所以我没有这个问题。

对不起，stackoverflow！

如果有人遇到类似问题，则大致是这样的：注册表单提交后，我们将用户令牌存储在localStorage中并处于注册组件状态。然后，我们重定向到/ home。

在Home组件中单击注销，我们从localStorage中删除令牌并重定向到/ register。

register从我们第一次访问它起就包含该用户令牌的状态，并认为注册已完成，因此将我们重定向回首页。我在想只是从组件状态中删除用户数据，并具有访问用户数据的静态功能。

this.setState不会触发组件

1 个答案: