React中Formik配合Axios发POST请求payload带values外层致400错误如何解决

问题原因 #

你调用axios.post传递请求体时使用了{ values }的写法，这是ES6的对象属性简写规则，等价于{ values: values }，相当于你主动给请求参数加了一层key为values的外层包装，才会出现你遇到的payload结构问题。

解决方法 #

直接把Formik返回的values作为axios.post的第二个参数传入即可，不需要额外包裹大括号，修改后的代码如下：

const handleSubmit = async (values: any) => {
    await axios
        // 移除参数外层的{}，直接传入values
        .post('http://localhost:3000/api/certificates', values)
        .then(function (response) {
            console.log(response);
        }).catch((err) => {
            console.log('error in call');
            console.log(err);
        }); 
};

修改后发起请求的payload就会直接是values内部的字段结构，没有外层的values包装，后端即可正常解析参数。

内容的提问来源于stack exchange，提问作者Shruti sharma