Javascript 反应-如何在我的表单中内联返回Axios捕获错误？

在用户注册期间，如果其他人正在使用电子邮件和/或用户名，“我的后端”会通知客户端。以下是由于Axios捕获错误而登录到webconsole的响应

我想将每个

电子邮件

和

用户名

映射到相应的字段。 我的表单基于材料UI和

下面是我的Axios实例提供的错误响应示例

{
"email":["This email is already in use"],
"username":["This username is already in use"]
}

这是我完整的react表单，我删去了一些内容以便于阅读：

export default function SignUp()
{
    const { register, control, errors: fieldsErrors, handleSubmit } = useForm()

    const onSubmit = (data, e) => {
        console.log(data);

        axiosInstance
            .post(`api/user/register/`, {
                email: data.email,
                username: data.username,
                password: data.password,
            })
            .then((res) => {
                history.push('/login');
                console.log(res);
                console.log(res.data);
            })
            .catch(err => {
                console.error(err.response.data);
            }
            )
    };


    return (
        <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
                <Avatar className={classes.avatar}></Avatar>
                <Typography component="h1" variant="h5">
                    Sign up
                </Typography>
                <form className={classes.form} noValidate onSubmit={handleSubmit(onSubmit)}>
                    <FormControl fullWidth variant="outlined">
                    <Grid container spacing={2}>
                        <Grid item xs={12}>
                                <Controller 
                                    name="email"
                                    as={
                                        <TextField
                                            variant="outlined"
                                            required
                                            fullWidth
                                            id="email"
                                            label="Email Address"
                                            name="email"
                                            autoComplete="email"
                                            error={Boolean(fieldsErrors.email)}
                                            onChange={
                                                (evt) =>
                                                {
                                                    let key = evt.currentTarget.name;
                                                    let value = evt.currentTarget.value;
                                                    handleChange({ [key]: value });
                                                }
                                            }
                                        />
                                    }
                                    control={control}
                                    defaultValue=""
                                    rules={{
                                        required: 'Required',
                                        pattern: {
                                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                                        message: 'invalid email address'
                                        }
                                    }}
                                    />
                            </Grid>
                            <Grid item xs={12}>
                                <Controller
                                    name="username"
                                    as={
                                        <TextField
                                            variant="outlined"
                                            required
                                            fullWidth
                                            id="username"
                                            label="Username"
                                            name="username"
                                            onChange={
                                                (evt) => {
                                                    let key =  evt.currentTarget.name;
                                                    let value = evt.currentTarget.value;
                                                    handleChange({[key]: value});
                                                }
                                                }
                                        />
                                    }
                                    control={control}
                                    defaultValue=""
                                    rules={{
                                        required: 'Required',
                                        pattern: {
                                        value: /^(?!.*\.\.)(?!.*\.$)[^\W][\w.]{0,29}$/i,
                                        message: 'Invalid use of characters'
                                        }
                                    }}
                                />
                                {fieldsErrors.username?.type && <p>{fieldsErrors.username?.message}</p>}
                        </Grid>
                            <Grid item xs={12}>
                                <Controller
                                    name="password"
                                    as={
                                    
                                        <TextField
                                            variant="outlined"
                                            required
                                            fullWidth
                                            name="password"
                                            label="Password"
                                            type="password"
                                            id="password"
                                            autoComplete="current-password"
                                            onChange={
                                                (evt) =>
                                                {
                                                    let key = evt.currentTarget.name;
                                                    let value = evt.currentTarget.value;
                                                    handleChange({ [key]: value });
                                                }
                                            }
                                        />
                                    }
                                    control={control}
                                    defaultValue="" 
                                />  
                        </Grid> 
                    </Grid>
                    <Button
                        type="submit"
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={classes.submit}
                        onClick={handleSubmit}
                    >
                        Sign Up
                    </Button>
                </FormControl>
                    
                </form>
            </div>
        </Container>
    );
}

导出默认函数注册（）
{
const{register，control，errors:fieldsErrors，handleSubmit}=useForm（）
const onSubmit=（数据，e）=>{
控制台日志（数据）；
轴位
.post（`api/user/register/`{
电子邮件：data.email，
用户名：data.username，
密码：data.password，
})
。然后（（res）=>{
history.push（'/login'）；
控制台日志（res）；
console.log（res.data）；
})
.catch（错误=>{
控制台错误（err.response.data）；
}
)
};
返回(
注册
}
control={control}
defaultValue=“”
规则={{
必需：“必需”，
模式：{
值：/^[A-Z0-9.\%+-]+@[A-Z0-9.-]+\[A-Z]{2,4}$/i，
消息：“无效的电子邮件地址”
}
}}
/>
}
control={control}
defaultValue=“”
规则={{
必需：“必需”，
模式：{
值：/^（？。.*\.\）（？！.*\.$）[^\W][\W.]{0,29}$/i，
消息：“字符使用无效”
}
}}
/>
{fieldsErrors.username？.type&{fieldsErrors.username？.message}
}
}
control={control}
defaultValue=“”
/>  
注册
);
}

我已经设法将错误创建到webalert中，但这看起来不太好。有没有简单的方法将捕获错误实现到表单中

我使用此字段错误：

{fieldsErrors.username?.type && <p>{fieldsErrors.username?.message}</p>}

{fieldsErrors.username？.type&{fieldsErrors.username？.message}
}

---

作为我的Regex错误，警告用户用户名中的非法字符。我在想也许我可以把错误加进去？但是我不知道怎么做。

您可以利用

useState

钩子来存储API中的错误。然后，可以使用模板以与显示正则表达式错误相同的格式呈现这些错误

另一方面，为了安全起见，告诉用户电子邮件已经被接收并不是一个好主意。但是，如果你的应用程序没有敏感数据，那也不是什么大问题

编辑：示例

export default function SignUp()
{
    const [ apiError, setApiError ] = useState(null)
    
    const onSubmit = (data, e) => {
        setApiError(null)

        axiosInstance
            //...
            .catch(err => {
                setApiError(err.response.data.message)
                console.error(err.response.data);
            }
            )
    };


    return (
    //....
    {apiError && <p>{apiError}</p>}
    //....
    )

导出默认函数注册（）
{
常量[APIRROR，setAPIRROR]=useState（null）
const onSubmit=（数据，e）=>{
setApiError（空）
轴位
//...
.catch（错误=>{
SetAPIRROR（err.response.data.message）
控制台错误（err.response.data）；
}
)
};
返回(
//....
{apierro&&p>{apierro}
}
//....
)

啊，我看到让用户知道电子邮件被接收会带来安全风险。谢谢你让我仔细考虑。你有没有伪代码来指导我使用Axios错误的useState？检查我答案的编辑。嗨，jlogan，很抱歉打扰你。我一直在按照你的指导实现你的代码。我没有收到任何语法错误，但是当我使用

{apiError&&{apiError}
}时，它们的显示中没有前端警告消息

？你知道为什么会出现这种情况吗？你确定要将错误消息传递给

setapierro

？我使用了

err.response.data.message

作为示例。我不知道错误数据的结构是什么。哦，好的，我明白了。我需要为每个错误设置两种不同的状态吗？在我的ori中ginal post我展示了JSON响应。这是我现在可以让它工作的方式：

setapierro（err.response.data.email）

。我想我处理的字段错误应该有两种状态。