在React上处理服务器端错误：Formik和Yup

问题描述

我一直在尝试从服务器端处理错误（即电子邮件已经存在）

到目前为止我已经尝试过的摘要：

1. 根据POST /注册请求，以电子邮件为唯一字段的方式异步创建用户模型。

2. 如果出现错误，我将使用“ res.send（e）”向客户端发送错误。

3. 等待Axios请求在尝试下将其保存到变量响应中。

4. 在catch块上，将错误设置为名称为'email'的字段

5. 最后将Submitting设置为false，以便用户纠正错误。

结果：服务器未显示console.log或错误消息。

我的问题如下：

• 如何指定从服务器端收到的错误？ （我尝试通过尝试访问“ e.detail”来尝试控制台日志记录错误块，但我将无法定义。

• 如何使用Formik和Yup在客户端处理此问题？ （最佳做法是什么？）

下面是我的代码设置。

我的服务器路由器设置。

const handleErrors = (e) => {
  console.log(Object.values(e));
  res.send(e)
};

module.exports.register_post = async (req,res) => {
    const { email,password,name,gender,social,about,interests } = req.body;

    try {
        const user = await User.create({
            email,twitter: social.twitter,instagram: social.instagram,interests,});
        const token = createtoken(user.id);
        console.log(user);
        res.cookie('jwt',token,{ httpOnly: true,maxAge: maxAge * 1000 });
        res.send(user);
    } catch (e) {
        handleErrors(e);
    }
};

我的前端React（with Formik）端设置

const onSubmit = async (values,{ setSubmitting,setFieldError }) => {
    const filteredValues = _pickBy(values,(_,key) => key !== 'password2');
    try {
        const response = await axios.post('http://localhost:8080/register',{
            ...filteredValues,});
        console.log(response);
        history.push('/register/verification');
    } catch (e) {
        setFieldError('email',e);
    } finally {
        setSubmitting(false);
    }
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）