为什么不重新渲染组件

Question

您好，我的组件无法重新渲染。

该组件是注册表格，目标是在条件不正确的情况下显示asp.net验证程序返回的消息。

由于组件未呈现，因此不会显示警报消息。但是问题可能出在我想发表外部意见的警报方法上

API响应：

{UserName: ["The UserName field is required."], ConfirmPassword: ["The ConfirmPassword field is required.", "'ConfirmPassword' and 'Password' do not match."]}

组件：

import React, { useState } from "react";
import { Button, Form, FormGroup, Label, Input, Container, Col, Row, Alert } from 'reactstrap';
import { FormError } from './FormError';
import "./cards.css";

export default function Register() {

    const [form, setForm] = useState();
    const [error, setError] = useState({"": [""]});

    function handleChange(evt) {
        const value = evt.target.value;
        setForm({
            ...form,
            [evt.target.name]: value
        });
    }

    async function submit(event) {
        event.preventDefault();
        const response = await fetch(`/api/Authentication/Register`, {
            method: 'POST',
            body: JSON.stringify(form),
            headers: { 'Content-Type':  "application/json"  }
        })
        await response.json().then(
            function (res) {
                if (res.status === 400) {
                    setError(res.errors);
                    console.log(error);
                }
            }
        );
    }

    function alert(field) {
        if ((field in error)) {
            error[field].map(test => { return(
                    <Alert color="danger">{test}</Alert>
                )}
            );
        }
    }

    return (
        <Container>
            <Row className="justify-content-md-center">
                <Col className="mt-5" md="6">
                    <Form onSubmit={submit} method="post">
                        {alert('')}
                        <FormGroup>
                            {alert('UserName')}
                            <Label for="UserName">UserName</Label>
                            <Input type="text" name="UserName" id="UserName" placeholder="UserName" onChange={handleChange} />
                        </FormGroup>
                        <FormGroup>
                            {alert('Mail')}
                            <Label for="Email">Email</Label>
                            <Input type="email" name="Mail" id="Mail" placeholder="Email" onChange={handleChange} />
                        </FormGroup>
                        <FormGroup>
                            {alert('Password')}
                            <Label for="Password">Password</Label>
                            <Input type="password" name="Password" id="Password" placeholder="Password" onChange={handleChange} />
                        </FormGroup>
                        <FormGroup>
                            {alert('ConfirmPassword')}
                            <Label for="ConfirmPassword">Confirm Password</Label>
                            <Input type="password" name="ConfirmPassword" id="ConfirmPassword" placeholder="Confirm Password" onChange={handleChange} />
                        </FormGroup>
                        <Row className="justify-content-md-center">
                            <Button>Submit</Button>
                        </Row>
                    </Form>
                </Col>
            </Row>
        </Container>
    );
}