Question

所以我有这个反应/节点应用程序，基本上当我输入所有详细信息后点击注册时，它会将我带到条纹结帐页面。但是，在没有调用 2-3 分钟后，我一直在阅读 firebase 进入 cold start。这是一个问题，因为我们预计在接下来的 6 个月内不会有大量流量进入我们的应用，这意味着不会每 2-3 分钟就有一个人使用该应用。

现在，在注册和条纹结帐之间的 limbo 期间，它进入白屏，大约 8 秒钟。我怎样才能让它成为一个加载屏幕，就像那些反应旋转加载器作为临时修复程序中的一个那样，这样我们的客户就不会担心应用程序会破坏他们？

这是我注册页面的代码，然后是调用stripe的函数：

let firestore = firebase.firestore()

const FormItem = Form.Item


var userIDStripeSubmit = ""
class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
  }

  onSubmit = (event) => {
    event.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (err) return
      const email = this.props.form.getFieldValue('email')
      const passwordOne = this.props.form.getFieldValue('password1')
      const firstName = this.props.form.getFieldValue('First Name')
      const lastName = this.props.form.getFieldValue('Last Name')
      const companyName = this.props.form.getFieldValue('Company Name')

      const {
        history,
      } = this.props

      AuthorizationHome.doCreateUserWithEmailAndPassword(email, passwordOne)
        .then((authUser) => facades.userFacade().doCreateUser(authUser.user.uid, email))

        .catch(error => {
          this.setState({'error': error})
        })



        // adding into profiledata collection


            // var userID = ""
            firebase.auth().onAuthStateChanged((user) => {
                if(user) {
                
                console.log(user.uid)
                userIDStripeSubmit = user.uid

                  console.log("userid inside firebase auth is" + user.uid)

                        //  var firstNameFromField = 
                          firestore.collection('profiledata').doc(user.uid).set({
                            firstname: firstName,
                            lastname: lastName,
                            companyname: companyName,
                            accountStatus: "inactive",
                        })
                        .catch(error => {
                            alert(error.message);
                        });
                        createCheckoutSession(user.uid)
              }
              })
             
              // firestore collection query
                
    })
  }

  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password1')) {
      callback('Passwords do not match!');
    } else {
      callback();
    }
  }

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['password2'], { force: true });
    }
    callback();
  }


  

  render() {
    const { getFieldDecorator } = this.props.form
    const { error } = this.state
    return (
      <Form onSubmit={this.onSubmit}  hideRequiredMark={true} className="registration-form" style={{ marginBottom: "0px" }}>
        { error && <Alert type="error" message={error.message}/> }

      
       
        <FormItem label="Email" colon={false} style={{ marginBottom: "0px" }}>
          {getFieldDecorator('email', {
            rules: [{
              type: 'email', message: 'Invalid email address',
            }, {
              required: true, message: 'Please input your email address',
            }],
          })(
            <Input placeholder="Enter email" />
          )}
        </FormItem>
        

{/*  */}

        <FormItem label="First Name" colon={false} style={{ marginBottom: "0px" }}>
          {getFieldDecorator('First Name', {
            rules: [{
              required: true, message: 'Please enter your First Name',
            }],
          })(
            <Input type="text" placeholder="Enter Your First Name"/>
          )}
        </FormItem>


        <FormItem label="Last Name" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('Last Name', {
            rules: [{
              required: true, message: 'Please enter your Last Name',
            }],
          })(
            <Input type="text" placeholder="Enter Your Last Name"/>
          )}
        </FormItem>

        <FormItem label="Company Name" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('Company Name', {
            rules: [{
              required: true, message: 'Please enter your Company Name',
            }],
          })(
            <Input type="text" placeholder="Enter Your Company Name"/>
          )}
        </FormItem>


        <FormItem label="Password" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('password1', {
            rules: [{
              required: true, message: 'Please choose a password',
            }, {
              validator: this.validateToNextPassword,
            }],
          })(
            <Input type="password" placeholder="Enter password"/>
          )}
        </FormItem>
        <FormItem label="Confirm Password" colon={false}  style={{ marginBottom: "0px" }}>
          {getFieldDecorator('password2', {
            rules: [{
              required: true, message: 'Please confirm your password',
            }, {
              validator: this.compareToFirstPassword,
            }],
          })(
            <Input type="password" onBlur={this.handleConfirmBlur} placeholder="Confirm password" />
          )}
        </FormItem>


        <FormItem>
          <Button type="primary" htmlType="submit" id="submitButton">Register</Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedRegistrationForm = Form.create()(RegistrationForm);
export default withRouter(WrappedRegistrationForm)

我是新手，所以请告诉我是否有什么我可以做的事情来使代码更易于阅读或做任何事情。我不确定如何创建或将加载微调器放在哪里

Answer 1

您需要实现一个显示在您的基本 HTML 文件中的加载默认值，它在您的公共目录中作为 index.html 找到。

请参考这个答案：https://stackoverflow.com/a/60404990/2301161

实现加载屏幕反应

1 个答案: