如果状态由函数在构造函数中设置，则 React 不会呈现

Question

我正在尝试根据用户登录状态启动页面。为此，我尝试通过一个函数设置初始状态，但它不会在 api 调用完成后更新视图。目前我在执行代码时看到第 3 部分。

    import React, { Component } from 'react';
    import axios from 'axios';
    import { API_BASE_URL } from './constants/apiConstants';

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

        this.state = {
            loginStatus: this.loginUpdate(),
        }
    }

    loginUpdate(){
        let token = localStorage.getItem("TOKEN");

        let tmpStatus = token!==""?true:false;

        if(tmpStatus){
            const payload = {
                "token": token
            }
    
            axios.post(API_BASE_URL + 'loginCheck', payload)
                .then((response) => {
                    tmpStatus=response.data.response;
                    return tmpStatus;
                });
        }else{
            return tmpStatus;
        }

        return null;
      }

    render() {
        return (
            <>
                {this.state.loginStatus===true &&
                    <p>Part 1</p>
                }

                {this.state.loginStatus===false &&
                    <p>Part 2</p>
                }

                {this.state.loginStatus===null &&
                    <p>Part 3</p>
                }
                </>
        )
    }
}

Answer 1

你也应该 return axios 结果。

    return axios.post(API_BASE_URL + 'loginCheck', payload)
            .then((response) => {
                tmpStatus=response.data.response;
                return tmpStatus;
            });

Answer 2

我能够通过以下方法解决问题：

import React, { Component } from 'react';
import axios from 'axios';
import { API_BASE_URL } from './constants/apiConstants';
export default class App extends Component {
constructor(props) {
    super(props)

    this.state = {
        loginStatus: null,
    }
}

componentDidMount() {
    this.loginUpdate();
}

loginUpdate(){
    let token = localStorage.getItem("TOKEN");

    let tmpStatus = token!==""?true:false;

    if(tmpStatus){
        const payload = {
            "token": token
        }

        axios.post(API_BASE_URL + 'giris/kontrol', payload)
            .then((response) => {
                tmpStatus=response.data.response;
                this.setState({loginStatus:tmpStatus});
            });
    }else{
        this.setState({loginStatus:tmpStatus});
    }
  }

render() {
    return (
        <>
            {this.state.loginStatus===true &&
                <p>Part 1</p>
            }

            {this.state.loginStatus===false &&
                <p>Part 2</p>
            }

            {this.state.loginStatus===null &&
                <p>Part 3</p>
            }
            </>
    )
  }
}

Answer 3

问题：

You should update the state variable inside the then callback of Axios. You have an API call in loginUpdate function but the problem is that your HTML renders first and then your API response comes. Also, you missed return statement before Axios but putting that will also not resolved your issue.

解法：

You should set your state variable inside the then callback.

import React, { Component } from 'react';
import axios from 'axios';
import { API_BASE_URL } from './constants/apiConstants';

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

    this.state = {
        loginStatus: localStorage.getItem("TOKEN") !== '' ? true : false,
    }
}

componentDidMount() {
    this.loginUpdate();
}

loginUpdate(){
    let token = localStorage.getItem("TOKEN");

    let tmpStatus = token!==""?true:false;

    if(tmpStatus){
        const payload = {
            "token": token
        }

        axios.post(API_BASE_URL + 'loginCheck', payload)
            .then((response) => {
                this.setState({ loginStatus: response.data.response });
         });
    }else{
        return tmpStatus;
    }

    return null;
  }

Answer 4

虽然构造函数是运行，但“loginStatus”状态设置为方法“loginUpdate()”的第一个结果，即“null”。当在构造函数中调用“loginUpdate()”方法时，它会启动 axios，但不会等待 axios 的回答。它将运行作为异步。设置“null”值后，构造函数完成其工作。因此，axios 的结果将永远不会被使用。

因此，在获取 axios 结果时，您应该使用 this.setState() 函数。此外，您不应在构造函数中使用该方法。因此，如果将方法放在“componentDidMount”中，并在axios上取到结果后使用setState函数，就会得到预期的结果。在 setState 函数中，您应该使用 axios 响应设置“loginStatus”。

如果状态由函数在构造函数中设置，则 React 不会呈现

React is not rendering if state is set in constructor by a function

constructor

state

render

function

reactjs