Я не могу изменить состояние, используя установленное состояние в componentDidMount

Question

Я не могу изменить состояние после получения ответа от axios get request

Это для простой страницы входа / регистрации с использованием стека MERN, где я пытаюсь получить доступ к персонализированной странице пользователя только после авторизации его на бэкэнде node.js. Я попробовал метод, который является общим с использованием _ismounting, но после некоторой отладки я увидел, что метод componentWillMount вызывается сразу после получения axios, который затем делает _isMounting как false, следовательно, не входит в код if, где я использую setState

class User extends Component {
    _isMounted = false;

    constructor(props){
        super(props)

        this.state={
            isAuthenticated:false
        }
    }

    componentDidMount(){
        this._isMounted = true;
        const token=localStorage.getItem("token");
        //alert(token);
        axios
        .get(`https://localhost:3443/users/${this.props.user}`,{ headers: { Authorization: `Bearer ${token}` } })
        .then(res => {
            if (this._isMounted){
            this.setState(() => ({
                isAuthenticated:true
              }));
            }
        })
        .catch(err => alert(JSON.stringify(err)));
    }
    componentWillUnmount() {
        this._isMounted = false;
      }

    render() {
        if(this.state.isAuthenticated===false) return(<Redirect to="/home" />)
        return(
            <div>
                Hello {this.props.user}
            </div>
        );
    }
}

Я просто хочу выполнить axios get до отображения страницы, чтобы проверить, авторизован пользователь или нет, и соответственно изменить состояние.

Answer 1

Ваш код никогда не достиг жизненного цикла componentDidMount, поскольку в вашей функции render вы проверяете, является ли isAuthenticated ложным, и выполняете перенаправление.

Поскольку вы установили начальное значение isAuthenticated как false, он всегда перенаправляется на /home и вызывает componentWillUnmount.

Это потому, что componentDidMount запускается после выполнения первого render.

Чтобы решить эту проблему, вы можете установить начальное значение isAuthenticated как null, поэтому ваш компонент достигнет componentDidMount и выполнит вызов axios, чтобы проверить, аутентифицирован ли пользователь или нет.

this.state = { isAuthenticated:null };

Answer 2

измените свою функцию рендеринга следующим образом .. я думаю, что это может помочь вам ..

render(){
     return (
     <div>
      {
           this.state.isAuthenticated === false ? (
                      <Redirect to="/home" />
           ):(
                      <div>{this.props.user}</div>
              )
       }
      </div>
      )
}