Reactjs Firebase，React：如何在客户端显示http错误？

我正在与React和Firebase建立一个项目。我已经将其分为两个repo—一个用于firebase函数的后端repo，一个用于React的客户端repo。我的项目的一部分涉及用户注册，我希望能够发送任何错误（例如，电子邮件已经在使用，弱密码）到客户端，但我不知道如何。有人对我如何将后端错误传递给客户端有什么建议吗

我知道我可以将firebase API调用移动到客户端，这将使错误处理变得更容易，但这会造成复杂性

代码如下：

注册组件

VenueRegister

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 { auth } from 'firebase/app'

class VenueRegister extends React.Component {
  constructor() {
    super();
    this.state = {
        email: '',
        password:'',
        confirmPassword:'',
        venueName:'',
        venueAddress:''
    };
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

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

  handleSubmit(e) {
    console.log("submit function reached");
    e.preventDefault();
    const venueData = {
      email: this.state.email,
      password: this.state.password,
      confirmPassword: this.state.confirmPassword,
      venueName: this.state.venueName,
      venueAddress: this.state.venueAddress
    };
    axios("http://localhost:5000/gig-fort/us-central1/api/registerVenue", {
      method: "POST",
      headers: {
        "content-type": "application/json",
      },
      data: venueData,
    })
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.error(err);
      });
  }



  render() {
    return (
      <>
        <Header />
        <h1 className="heading-venue-reg">Register your venue</h1>
        <form onSubmit = {this.handleSubmit}>
          <TextField
            required
            id="standard-required"
            name = 'email'
            label="Required"
            defaultValue="email"
            placeholder="email"
            onChange = {this.handleChange}
          />
          <TextField
            required
            id="standard-required"
            name = 'password'
            label="Required"
            defaultValue="password"
            placeholder="password"
            onChange = {this.handleChange}
          />
          <TextField
            required
            id="standard-required"
            name = 'confirmPassword'
            label="Required"
            defaultValue="confirm password"
            placeholder="confirm password"
            onChange = {this.handleChange}
          />
          <TextField
            required
            id="standard-required"
            name = 'venueName'
            label="Required"
            defaultValue="venue name"
            placeholder="venue name"
            onChange = {this.handleChange}
          />
          <TextField
            required
            id="standard-required"
            name = 'venueAddress'
            label="Required"
            defaultValue="venue address"
            placeholder="venue address"
            onChange = {this.handleChange}
          />

    <Button type="submit">Submit</Button>
        </form>
      </>
    );
  }
}

export default VenueRegister

---

在前端，当从后端接收数据时，应该检查响应数据是否有错误。很可能您需要一个util函数，因为它是几乎所有请求中的一个常见任务（因此可以重用）

因此，您希望检查

响应.status

，然后设置一个新状态，如

hasrerror

或会导致组件重新渲染并显示的内容，即，向用户显示错误并允许重试操作的子组件

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})
        }
        //TODO: put in conditional statement that sends 'weak password error' to client
    })
})