如何解决Firebase-React：如何呈现当前用户？？

我想将特定的用户数据呈现给react组件。用户注册时，他们将提交其场所的名称，该名称将保存到venueName变量中。我想提取此属性，然后将其呈现在GigRegister组件上。关于如何提取此信息的任何建议？

这是注册路线

app.post(''/registerVenue'',(req,res) =>{
    const newVenue = {
        email: req.body.email,password: req.body.password,confirmPassword: req.body.confirmPassword,venueName: req.body.venueName,venueAddress: req.body.venueAddress
    }

    let errors = {}

    if(isEmpty(newVenue.email)){
        errors.email = ''Email must not be empty''
    }else if (!isEmail(newVenue.email)){
        errors.email = ''must be a valid email address''
    }

    if(Object.keys(errors).length >0){
        return res.status(400).json(errors)
    }

    let token,userId
    db.doc(`/user/${newVenue.venueName}`).get()
    .then(doc => {
        if(doc.exists){
            return res.status(400).json({venueName: `This venue name is already taken`})
        } else {
            return firebase
            .auth()
            .createuserWithEmailAndPassword(newVenue.email,newVenue.password)
        }
    })
    .then(data=> {
        userId = data.user.uid;
        return data.user.getIdToken()
    })
    .then(idToken => {
        token = idToken
        const venueDetails ={
            email: newVenue.email,venueName: newVenue.venueName,venueAddress: newVenue.venueAddress,createdAt: new Date().toISOString(),userId
        }
        return db.doc(`/users/${newVenue.venueName}`).set(venueDetails)
    })
    .then(() => {
        return res.status(201).json({token})
    })
    .catch(err => {
        console.error(err)
        if(err.code === ''auth/email-already-in-use''){
            return res.status(400).json({email: ''Email is already in use''})
        } else {
            return res.status(500).json({error:err.code})
        }
    })
})

这是Gig注册路线（已登录的用户可以在其中发布基于文本的信息）

app.post(''/createGigListing'',FBAuth,res) => {
    const newGig = {
        venueName: req.user.venueName,name: req.body.name,time: req.body.time,price: req.body.price,genre: req.body.genre,tickets: req.body.tickets,date: req.body.date
    }
    db
    .collection(''gig-listing'')
    .add(newGig)
    .then(doc => {
        res.json({message: `document ${doc.id} created successfully`})
    })
    .catch(err =>{
        res.status(500).json({error: ''something went wrong''})
        console.error(err)
    })
})

最后，这是我要渲染到的组件：

import React from "react";
    import Header from "./Header";
    import TextField from "@material-ui/core/TextField";
    import Button from "@material-ui/core/Button";
    import axios from "axios";
    import * as firebase from ''firebase''
    import { auth } from ''firebase/app''
    
    class GigRegister extends React.Component {
      constructor() {
        super();
        this.state = {
          name: "",venue: "",time: "",date: "",genre: "",tickets: "",price: "",};
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
      }
    
      handleChange(e) {
        this.setState({
          [e.target.name]: e.target.value,});
      }
    
      handleSubmit(e) {
        console.log("submit function reached");
        e.preventDefault();
        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,};
        
        
        auth().currentUser.getIdToken().then(function(token) {
          axios("http://localhost:5000/gig-fort/us-central1/api/createGigListing",{
            method: "POST",headers: {
              "content-type": "application/json","Authorization": "Bearer "+token,},data: gigData,})
      })
          .then((res) => {
            console.log(res);
            this.props.history.push(''/Homepage'')
          })
          .catch((err) => {
            console.error(err);
          });
      }
    
    
    
      render() {

        return (
          <div className="gig-register">
            <Header />
            <h1 className="header-gigReg">Register a gig</h1>
            <form onSubmit={this.handleSubmit}>
              <TextField
                placeholder="Event name"
                defaultValue="Event name"
                id="name"
                name="name"
                onChange={this.handleChange}
              />
              <TextField
                placeholder="Venue"
                defaultValue="Venue"
                id="venue"
                name="venue"
                onChange={this.handleChange}
              />
              <TextField
                placeholder="Time"
                defaultValue="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"
                defaultValue="2017-05-24"
                InputLabelProps={{
                  shrink: true,}}
                onChange={(e) => {
                  this.setState({ date: e.target.value });
                }}
              />
              <TextField
                placeholder="Genre"
                defaultValue="Genre"
                id="genre"
                name="genre"
                onChange={this.handleChange}
              />
              <TextField
                placeholder="Tickets"
                defaultValue="Tickets"
                id="tickets"
                name="tickets"
                onChange={this.handleChange}
              />
              <TextField
                placeholder="Price"
                defaultValue="Price"
                id="price"
                name="price"
                onChange={this.handleChange}
              />
              <Button type="submit">Submit</Button>
            </form>
          </div>
        );
      }
    }
    
    export default GigRegister

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）