登录后和异步调用后，React重新渲染

Question

In my Login react component here, I call handleLogin within the handleSubmit method. And then... (see below)...

import React from "react"
import { Redirect } from "react-router-dom"
import axios from 'axios'
import Form from "./Form"
import View from "./View"
import { handleLogin, isLoggedIn } from "../utils/auth"

export default class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      email: ``,
      password: ``,
    };
  }

  handleUpdate(event) {
    this.setState({
      [event.target.name]: event.target.value,
    })
  }

  handleSubmit(event) {
    event.preventDefault()
    handleLogin(this.state)
  }

  render() {
    if (isLoggedIn()) {
      return <Redirect to={{ pathname: `/app/profile` }} />
    }

    return (
      <View title="Log In">
        <Form
          handleUpdate={e => this.handleUpdate(e)}
          handleSubmit={e => this.handleSubmit(e)}
        />
      </View>
    )
  }
}

...Within the handleLogin method (imported from ../utils/auth below), I make an asynchronous call ( axios.post ):

// in /utils/auth.js

import axios from 'axios'

const isBrowser = typeof window !== `undefined`

const getUser = () =>
  window.localStorage.gatsbyUser
    ? JSON.parse(window.localStorage.gatsbyUser)
    : {}

const setUser = user => (window.localStorage.gatsbyUser = 
JSON.stringify(user))

export const handleLogin = ({ email, password }) => {
  if (!isBrowser) return false

  axios.post(`${process.env.API_URL}/sessions`, {
    email: email,
    password: password,
  })
  .then(response => {
    console.log(response);
    return setUser({
      name: `Jim`,
      legalName: `James K. User`,
      email: email,
    })
  })
  .catch(error => {
    return false
  });
}

export const isLoggedIn = () => {
  if (!isBrowser) return false

  const user = getUser()
  return !!user.email
}

The problem I run into is that the render() method is called before the axios.post / handleLogin(this.state) is resolved, thus preventing the render() method from seeing the isLoggedIn() as returning true .

I'd like to know how I can prevent the render() method from being called before axios.post is resolved.

Answer 1

You can solve this problem by triggering a re-render. Based on your code example, I reckon you just need to wait for the handleLogin async call to finish, then check if user is logged or not with isUserLogin , you should add a local state that is mirrored isUserLogin to trigger the re-render.

Below is an example using Promise, you can achieve the same thing with async/await:

export default class Login extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      email: ``,
      password: ``,
      isLoggedIn: false
    };
  }

  handleSubmit(event) {
    event.preventDefault()
    handleLogin(this.state)
      .then(response => this.setState({isLoggedIn: isLoggedIn()}))
      .catch(err => // Handle the error here, or just swallow it)
  }

  render() {
    if (this.state.isLoggedIn) {
      return <Redirect to={{ pathname: `/app/profile` }} />
    }

    return (
      <View title="Log In">
        <Form
          handleUpdate={e => this.handleUpdate(e)}
          handleSubmit={e => this.handleSubmit(e)}
        />
      </View>
    )
  }
}