Question

我正在尝试让NavBar根据用户是否登录来切换React，并在登录时在导航栏中显示用户名。我有两个名为NavBar的组件（未登录时））和UserNav（登录时）。无论出于何种原因导航都没有在用户登录时切换。使用React DevTools时，当用户登录时，它仍会显示NavBar组件。显示名称也不会显示。这是代码。

App.js

var React = require('react');
var NavBar = require('./components/NavBar/NavBar');
var UserNav = require('./components/UserNav/UserNav');

// Main App
// <App />
var App = React.createClass({
  handleSignIn : function(){
    var provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider).then(function(result) {
      // This gives you a Google Access Token. You can use it to access the     Google API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      // ...
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      // The email of the user's account used.
      var email = error.email;
      // The firebase.auth.AuthCredential type that was used.
      var credential = error.credential;
      // ...
    });
    var user = firebase.auth().currentUser;
    console.log(user);
  },
  render : function() {
    var user = firebase.auth().currentUser;
    console.log(user);
    return (
      <div className="digestible-app">
       {user ? <UserNav handleSignIn={this.handleSignIn}/> : <NavBar handleSignIn={this.handleSignIn} />}
        <main>
           {this.props.children}
        </main>
      </div>
     );
   }
 });

UserNav.js

var React = require('react');
var App = require('../../App');

// UserNav
// <UserNav />
var UserNav = React.createClass({
  render: function() {
    var user = firebase.auth().currentUser;
    return (
      <nav className="navbar navbar-default">
        <div className="container">
          <div className="navbar-header">
            <a className="navbar-brand" href="#">App</a>
          </div>
          <ul className="nav navbar-nav navbar-right">
            <li><button className="createQuizBtn btn btn-default navbar-btn" style={{ marginRight : 20 }}>Create a Quiz</button></li>
            <li><button className="display-name btn btn-default navbar-btn" onClick={this.props.handleSignIn}>{user.displayName}</button></li>
          </ul>
        </div>
      </nav> 
    );
  }
});

module.exports = UserNav;

Answer 1

问题在于您将用户保留为独立变量，而不是将其作为您所在州的一部分。 React只会在状态发生变化时重新呈现您的组件。因此，不要为您的用户设置变量，而应该让它成为您的一部分，并在用户登录（或注销）时设置它。

// code code code ...
var App = React.createClass({
getInitialState: function() {
  return {user: null};
},
handleSignIn : function(){
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the     Google API.
  var token = result.credential.accessToken
  // The signed-in user info. Put this into state to force a rerender.
  setState({user: result.user});
  // ...
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});
// I don't think you need this code, but if so you should be setting 
// the user to state, same as above.
// var user = firebase.auth().currentUser;
// console.log(user);
},
render : function() {
  // get the user from state.
  const user = this.state.user;
  console.log(user);
  return (
    // the same logic you had for rendering.
    // ...

相关的注意事项，当您在应用初始化时使用auth.currentUser获取当前用户时，您可能会获得null。如果您遇到问题，请记住我没有工作，您应该考虑使用onAuthStateChanged()来吸引用户。更多信息和example here。

NavBar没有改变React

1 个答案: