Question

1。上下文
该代码在“注册”页面中使用，以便有条件地呈现“注册”表单或在其中输入确认码的表单，以便可以确认用户的电子邮件地址。 AWS Amplify用于在用户池中创建用户帐户，并确认电子邮件地址。

2。问题
两种形式在被调用时都不会呈现。

3。所有其他源代码
https://github.com/pimp-my-book/FDWA

4。代码

import React, { useState } from "react";
import Auth from "@aws-amplify/auth";
import { Button, Form, Container, Col, Row } from "react-bootstrap";

const SignUp = ( ) => {
    const [ username, setUsername ] = useState("");
    const [ password, setPassword ] = useState("");
    const [ confirmationCode, setConfirmationCode ] = useState("");
    const [ newUser, setNewUser ] = useState(null);

    const handleSubmit = async event => {
        event.preventDefault();

        try {
            const newUser = await Auth.signUp(username, password);
            console.log(newUser);
            setNewUser(newUser)
        }
        catch (e) {
            alert(e.message)
        }
    }

    const handleConfirmationSubmit = async event => {
        event.preventDefault();

        try {
            await Auth.confirmSignUp(username, confirmationCode);
            await Auth.signIn(username, password)
        }
        catch (e) {
            alert(e.message)
        }
    }

    const renderForm = () => {
        return(
          <Container>
              <Row>
                  <Col>
                    <div>
                        Sign Up
                    </div>
                  </Col>
              </Row>
              <Row>
                  <Form onSubmit={ handleSubmit }>
                    <Form.Row>
                        <Form.Group controlId="sign-up-email">
                            <Form.Label>Email Address</Form.Label>
                                <Form.Control
                                    type="email"
                                    placeholder="Please enter your email address here..."
                                    value={ username }
                                    onChange = { e => setUsername( e.target.value ) }
                                />
                        </Form.Group>
                    </Form.Row>
                    <Form.Row>
                        <Form.Group controlId="sign-up-password">
                            <Form.Label>Password</Form.Label>
                                <Form.Control
                                    type="password"
                                    placeholder="Please enter your password here..."
                                    value={ password }
                                    onChange = { e => setPassword( e.target.value ) }
                                />
                        </Form.Group>
                    </Form.Row>
                    <Form.Row>
                        <Form.Group controlId="sign-up-password">
                            <Button variant="primary" type="submit">
                                Submit
                            </Button>
                        </Form.Group>
                    </Form.Row>
                  </Form>
              </Row>
          </Container>  
        );
    }

    const renderConfirmationForm = () => {
        return(
            <Container>
                <Row>
                  <Col>
                    <div>
                        Confirmation Code
                    </div>
                  </Col>
              </Row>
              <Row>
                  <Form onSubmit={ handleConfirmationSubmit }>
                      <Form.Row>
                          <Form.Group controlId="confirmation-code-input">
                              <Form.Label>We've sent a Confirmation Code to your Email Address -_-</Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder="Please enter your Code here..."
                                    value={ confirmationCode }
                                    onChange={ e => setConfirmationCode( e.target.value ) }
                                />
                          </Form.Group>
                      </Form.Row>
                      <Form.Row>
                          <Form.Group controlId="confirmation-code-button">
                              <Button variant="primary" type="submit">
                                  Confirm Your Code
                              </Button>
                          </Form.Group>
                      </Form.Row>
                  </Form>
              </Row>
            </Container>
        );
    }

    return (
        <div>
            {
                newUser === null
                ? <renderForm/>
                : <renderConfirmationForm/>
            }
        </div>
    );
}

export default SignUp

Answer 1

使用大写字母表示组件名称

const RenderForm=()=>{....}

const RenderConfirmationForm=()=>{....}

Answer 2

由于renderConfirmationForm和renderForm都是函数，因此您不必使用jsx而是只需调用这些函数，它的性能会更好一些，并且可以使React开发工具中的内容更加简洁：

return (
  <div>
    {newUser === null
      ? renderForm()
      : renderConfirmationForm()}
  </div>
);

使用React-Hooks进行条件渲染

2 个答案: