javascript-组件渲染为时过早

2019-12-10 23:35:50 阅读：197 来源： 互联网

我试图创建一个PrivateRoute(HOC)来测试用户是否已通过身份验证(在redux存储中检查“ auth”是否存在),然后再将其发送到实际路由.问题是在我的身份验证出现在redux存储中之前,privateroute完成了.

console.log第一次运行两次,auth没有出现在存储中,但是第二次出现,但是到那时,它已经将用户路由到登录屏幕了.提取完成？当我只想有条件地显示某些内容(例如登录/注销按钮)时,我知道如何执行此条件,但是当尝试有条件地路由某人时,这种方法无效.

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Route } from 'react-router-dom'

class PrivateRoute extends Component {
  render() {
    const { component: Component, ...rest } = this.props
    console.log(this.props)

    return (
      <Route {...rest} render={(props) => (props.auth ? <Component {...props} /> : props.history.push('/login'))} />
    )
  }
}

function mapStateToProps({ auth }) {
  return { auth }
}

export default connect(mapStateToProps)(PrivateRoute)

解决方法:

我没有在这里使用redux,但是我想您会明白的.希望这会有所帮助,并随时提出任何问题！

import React, { Component } from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";

import Dashboard from "path/to/pages/Dashboard";

class App extends Component {
  state = {
    isLoggedIn: null,
  };

  componentDidMount () {
    // to survive F5
    // when page is refreshed all your in-memory stuff
    // is gone
    this.setState({ isLoggedIn: !!localStorage.getItem("sessionID") });
  }

  render () {
    return (
      <BrowserRouter>
        <Switch>
          <PrivateRoute
            path="/dashboard"
            component={Dashboard}
            isLoggedIn={this.state.isLoggedIn}
          />
          <Route path="/login" component={Login} />

          {/* if no url was matched -> goto login page */}
          <Redirect to="/login" />
        </Switch>
      </BrowserRouter>
    );
  }
}

class PrivateRoute extends Component {
  render () {
    const { component: Component, isLoggedIn, ...rest } = this.props;

    return (
      <Route
        {...rest}
        render={props =>
          isLoggedIn ? <Component {...props} /> : <Redirect to="/login" />
        }
      />
    );
  }
}

class Login extends Component {
  state = {
    login: "",
    password: "",
    sessionID: null,
  };

  componentDidMount () {
    localStorage.removeItem("sessionID");
  }

  handleFormSubmit = () => {
    fetch({
      url: "/my-app/auth",
      method: "post",
      body: JSON.strigify(this.state),
    })
      .then(response => response.json())
      .then(data => {
        localStorage.setItem("sessionID", data.ID);

        this.setState({ sessionID: data.ID });
      })
      .catch(e => {
        // error handling stuff
      });
  };

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

    if (sessionID) {
      return <Redirect to="/" />;
    }

    return <div>{/* login form with it's logic */}</div>;
  }
}

标签：reactjs,redux,javascript
来源： https://codeday.me/bug/20191210/2104922.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-组件渲染为时过早