从回调更新 React 组件状态

Question

I have the following react component, which contains the state signed_in . When the login state changes, the callback fires (verified using the console logging), but the component does not re-render.

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>
    );
  }
}

I suspect this may be because the callback function isn't modifying the components state ( this.state )? What is the fix here?

Answer 1

In the case of your class based component, a re-render is triggered by calling the components setState() method.

The setState() method accepts an object describing the state change that will be applied to your components state:

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

By calling setState() React internally applies the state change to the existing component state and then triggers a re-render, at which point any state changes that have been made will be visible in your components the subsequent render cycle.

In the case of your code, one way to achieve these changes would be:

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>
    );
  }
}