Reactjs 反应，Firebase:Auth可能无法重定向

我有一个组件，当点击提交按钮时，它可以捕获用户信息并将其发布到firebase。该组件中还有一个函数，用于获取所有发布的数据，并仅返回当前登录用户发布的帖子：

     authListener() {
        auth().onAuthStateChanged(user => {
          if(user){
            this.setState({
              userDetails:user
            },
            () =>
            firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot => {
              let filteredGigs = querySnapshot.docs.filter(snapshot => {
                return snapshot.data().user === this.state.userDetails.uid
              })
              this.setState({
                filterGigs: filteredGigs
              })
            })
            ) //end of set state
          } else {
            this.setState({
              userDetails:null
            })
            console.log('no user signed in')
          }
        })
      }

此函数工作并显示它应该显示的内容。但是，当执行submit函数（在同一个组件中）时，它应该重定向到另一个页面，但是我没有得到任何呈现，并且错误

TypeError:无法读取null的属性“uid”

然而，当我刷新页面时，它会显示正确的页面

这基本上是说，在重定向时，

this.state.userDetails.uid

的计算结果为null，即使我当时已登录。你知道为什么会发生这种情况，有没有可能的解决办法

以下是整个组件：

import React from "react";
import Header from "./Header";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { withStyles } from '@material-ui/core/styles';
import axios from "axios";
import  firebase from 'firebase'
import { auth } from 'firebase/app'
import {Link} from 'react-router-dom'
import UniqueVenueListing from './UniqueVenueListing'

const StyledButton = withStyles({
  root: {
    background: '#54ADA6',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 30,
    padding: '0 30px',
    marginRight: '1px'
    
  },
  label: {
    textTransform: 'capitalize',
  },
})(Button);



    class GigRegister extends React.Component {
      constructor() {
        super();
        this.state = {
          name: "",
          venue: "",
          time: "",
          date: "",
          genre: "",
          tickets: "",
          price: "",
          venueWebsite: "",
          bandWebsite:"",
          userDetails: {},
          filterGigs: [],
          isLoggedIn:false,
          currentToken:{}
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
      }

      handleChange(e) {
        this.setState({
          [e.target.name]: e.target.value,
        });
      }

      handleClick() {
        console.log("handle click reached");
        auth()
          .signOut()
          .then(() => {
            console.log("Successfully signed out");
          })
          .catch((err) => {
            console.log(err);
          });
      }

      authListener() {
        auth().onAuthStateChanged(user => {
          if(user){
            console.log(`this is the user: ${user.uid}`)
            this.setState({
              userDetails:user
            },
            () =>
            firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot => {
              let filteredGigs = querySnapshot.docs.filter(snapshot => {
                return snapshot.data().user === this.state.userDetails.uid
              })
              this.setState({
                filterGigs: filteredGigs
              })
            })
            ) //end of set state
          } else {
            this.setState({
              userDetails:null
            })
            console.log('no user signed in')
          }
        })
      }

      componentDidMount() {
        this.authListener();
      }


      handleSubmit(e) {
        
        let user = this.state.userDetails.uid;
        const gigData = {
          name: this.state.name,
          venue: this.state.venue,
          time: this.state.time,
          date: this.state.date,
          genre: this.state.genre,
          tickets: this.state.tickets,
          price: this.state.price,
          venueWebsite: this.state.venueWebsite,
          bandWebsite: this.state.bandWebsite,
          user: user
        };

        auth()
          .currentUser.getIdToken()
          .then(function (token) {
            axios(
              "https://us-central1-gig-fort.cloudfunctions.net/api/createGigListing",
              {
                method: "POST",
                headers: {
                  "content-type": "application/json",
                  Authorization: "Bearer " + token,
                },
                data: gigData,
              }
            );
          })
          .then((res) => {
            this.props.history.push("/Homepage");
          })
          .catch((err) => {
            console.error(err);
          });
      }

      render() {
        return (
          <div className="gig-register">
            <Header />
            <div className="heading-container">
              <h1>Venue Dashboard</h1> <br></br>
              {this.state.userDetails ? (
                <h3>You are signed in as {this.state.userDetails.email}</h3>
              ) : null}
              <div className="gig-reg-buttons">
                {this.state.userDetails ? (
                  <StyledButton onClick={this.handleClick}>Sign out </StyledButton>
                ) : (
                  <Link to="/" style={{ textDecoration: "none" }}>
                    <StyledButton>Sign In</StyledButton>
                  </Link>
                )}
                <Link to="/Homepage" style={{ textDecoration: "none" }}>
                <StyledButton>Go to gig listings</StyledButton>
                </Link>
              </div>
            </div>
            <div className="handle-gigs">
              <div className="reg-gig-input">
                <form onSubmit={this.handleSubmit}>
                  <h3>Register a gig</h3>
                  <br></br>
                  <TextField
                    placeholder="Event name"
                    id="name"
                    name="name"
                    onChange={this.handleChange}
                  />
                  <TextField
                    placeholder="Time"
                    type="time"
                    label="Enter start time"
                    id="time"
                    name="time"
                    InputLabelProps={{
                      shrink: true,
                    }}
                    inputProps={{
                      step: 300, // 5 min
                    }}
                    onChange={this.handleChange}
                  />
                  <TextField
                    id="date"
                    label="Select date"
                    type="date"
                    InputLabelProps={{
                      shrink: true,
                    }}
                    onChange={(e) => {
                      this.setState({ date: e.target.value });
                    }}
                  />
                  <TextField
                    placeholder="Genre"
                    id="genre"
                    name="genre"
                    onChange={this.handleChange}
                  />
                  <TextField
                    placeholder="Band website"
                    id="bandWebsite"
                    name="bandWebsite"
                    onChange={this.handleChange}
                  />
                  <TextField
                    placeholder= "Link to ticketing agent"
                    id="tickets"
                    name="tickets"
                    onChange={this.handleChange}
                  />
                  <TextField
                    placeholder="Price"
                    id="price"
                    name="price"
                    onChange={this.handleChange}
                  />
                  <TextField
                    placeholder="Venue website"
                    id="venueWebsite"
                    name="venueWebsite"
                    onChange={this.handleChange}
                  />
                  <Button type="submit">Submit</Button>
                </form>
              </div>
              <div className="manage-gigs">
                <h3 className="manage-gig">Manage your gigs</h3>
                <br></br>
                {this.state.userDetails ? (
                  <UniqueVenueListing gigList={this.state.filterGigs} />
                ) : (
                  <h2>no gigs to show</h2>
                )}
              </div>
            </div>
          </div>

        );
      }
    }
    
    export default GigRegister

从“React”导入React；
从“/Header”导入标题；
从“@material ui/core/TextField”导入TextField；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/styles”导入{withStyles}”；
从“axios”导入axios；
从“firebase”导入firebase
从“firebase/app”导入{auth}
从“react router dom”导入{Link}
从“./UniqueVenueListing”导入UniqueVenueListing
const StyledButton=带有样式({
根目录：{
背景：“#54ADA6”，
边界半径：3，
边界：0，
颜色：'白色'，
身高：30，
填充：“0 30px”，
marginRight:“1px”
},
标签：{
textTransform:'大写'，
},
})（按钮）；
类GigRegister扩展了React.Component{
构造函数（）{
超级（）；
此.state={
姓名：“，
地点：“，
时间：“，
日期：“，
体裁：“，
门票：“，
价格：“，
VenueWeb站点：“，
网站：“，
用户详细信息：{}，
filterGigs:[]，
伊斯洛格丁：错，
currentToken:{}
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.handleClick=this.handleClick.bind（this）；
}
手变（e）{
这是我的国家({
[e.target.name]：e.target.value，
});
}
handleClick（）{
日志（“点击手柄”）；
auth（）
.signOut（）
.然后（（）=>{
console.log（“成功注销”）；
})
.catch（（错误）=>{
控制台日志（err）；
});
}
authListener（）{
auth（）.onAuthStateChanged（用户=>{
如果（用户）{
log（`这是用户：${user.uid}`）
这是我的国家({
用户详细信息：用户
},
() =>
firebase.firestore（）.collection（'gig-listing'）.onSnapshot（querySnapshot=>{
让filteredGigs=querySnapshot.docs.filter（快照=>{
返回snapshot.data（）.user==this.state.userDetails.uid
})
这是我的国家({
filterGigs:filteredigs
})
})
)//设置状态结束
}否则{
这是我的国家({
userDetails:null
})
console.log（'没有用户登录'）
}
})
}
componentDidMount（）{
this.authListener（）；
}
handleSubmit（e）{
让user=this.state.userDetails.uid；
常量数据={
名称：this.state.name，
地点：这个州，地点，
时间：这个州，时间，
日期：this.state.date，
类型：this.state.genre，
票：这个州的票，
普莱斯：这个州普莱斯，
venueWebsite:this.state.venueWebsite，
bandWebsite:this.state.bandWebsite，
用户：用户
};
auth（）
.currentUser.getIdToken（）
.then（功能（令牌）{
axios(
"https://us-central1-gig-fort.cloudfunctions.net/api/createGigListing",
{
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
授权：“持票人”+代币，
},
数据：gigData，
}
);
})
。然后（（res）=>{
this.props.history.push（“/主页”）；
})
.catch（（错误）=>{
控制台错误（err）；
});
}
render（）{
返回(
场馆仪表板


{this.state.userDetails(
您已以{this.state.userDetails.email}身份登录
)：null}
{this.state.userDetails(
退出
) : (
登录
)}
转到演出列表
登记演出



{
this.setState（{date:e.target.value}）；
}}
/>
提交
管理你的演出



{this.state.userDetails(
) : (
没有演出
)}
);
}
}
导出默认寄存器

由于数据是从Firestore异步加载的，因此不能保证用户在运行

过滤器

方法时仍然登录

---

如果你想继续

  if(user){
    console.log(`this is the user: ${user.uid}`)
    this.setState({
      userDetails:user
    },
    () =>
    firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot => {
      let filteredGigs = querySnapshot.docs.filter(snapshot => {
        return snapshot.data().user === user.uid
      })

  if(user){
    console.log(`this is the user: ${user.uid}`)
    this.setState({
      userDetails:user
    },
    () =>
    firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot => {
      if (this.state.userDetails) {
        let filteredGigs = querySnapshot.docs.filter(snapshot => {
          return snapshot.data().user === this.state.userDetails.uid
        })
      }
      else {
        console.log("User no longer signed in when database returned results, skipping filtering...");
      }