Обновление состояния компонента React из обратного вызова

Question

У меня есть следующий компонент реакции, который содержит состояние signed_in. При изменении состояния входа в систему вызывается обратный вызов (проверяется с помощью ведения журнала консоли), но компонент не выполняет повторную визуализацию.

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    auth.onAuthStateChanged(function(user) {
      if (user) {
        this.state = { signed_in: true };
        console.log("signed in");
      } else {
        this.state = { signed_in: false };
        console.log("signed out");
      }
    });
  }

  render() {
    return (
      <MDBContainer className="text-center mt-5 pt-5">
        <div>
          {this.state.signed_in ? (
            <div>
              <h5>Please sign-in:</h5>
              <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
            </div>
          ) : (
            <h5>You are already signed in.</h5>
          )}
        </div>
      </MDBContainer>
    );
  }
}

Я подозреваю, что это может быть из-за того, что функция обратного вызова не изменяет состояние компонентов (this.state)? Что за исправление здесь?

Answer 1

В случае вашего компонента, основанного на классе, повторное рендеринг запускается путем вызова метода компонентов setState().

Метод setState() принимает объект, описывающий изменение состояния, которое будет применено к состоянию компонентов:

/* Update the signed_in field of your components state to true */
this.setState({ signed_in: true });

При вызове setState() React внутренне применяет изменение состояния к существующему состоянию компонента, а затем запускает повторную визуализацию, после чего любые внесенные изменения состояния будут видны в ваших компонентах в последующем цикле визуализации.

В случае вашего кода одним из способов добиться этих изменений будет:

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    /* Make arrow function, allowing component's
    setState method to be accessible via "this" */
    auth.onAuthStateChanged((user) => {
      if (user) {
        /* Pass state change to setState() */
        this.setState({ signed_in: true });
        console.log("signed in");
      } else {
        /* Pass state change to setState() */
        this.state = { signed_in: false };
        console.log("signed out");
      }
    });
  }

  render() {
    return (
      <MDBContainer className="text-center mt-5 pt-5">
        <div>
          {this.state.signed_in ? (
            <div>
              <h5>Please sign-in:</h5>
              <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
            </div>
          ) : (
            <h5>You are already signed in.</h5>
          )}
        </div>
      </MDBContainer>
    );
  }
}