React: Uncaught (in promise) Error: Request failed with status code 400

Question

我正在从 formik 向我的 django rest api 发送一个令牌和两个表单输入以重置密码。当我这样做时，我收到一个 400 错误，响应是我缺少 new_password1 和 new_password2:

{"new_password1":["This field is required."],"new_password2":["This field is required."]}

我假设这是因为我将值包装在 uid 和令牌中，如下所示：

axios.post(API.auth.passwordResetConfirm, {uid, token, values} )

如果我只是这样做，那么它会给我一个回复，要求提供 uid 和令牌，而不是密码：

axios.post(API.auth.passwordResetConfirm, values )

我如何发送两个密码和 uid 以及令牌而不像这样“嵌套”值（如果这是我认为的问题）？

这是完整的代码：

import { useState } from 'react';
import { useParams } from "react-router"
import axios from "axios"
import { Formik, Field, Form } from 'formik';
import { API } from '../api'

export function ResetConfirm() {
    const [loading, setLoading] = useState(false)
    const [success, setSuccess] = useState(false)
    const { uid } = useParams()
    const { token } = useParams()
    console.log(uid);
    console.log(token);

    function handleSubmit(values, { resetForm }) {
        setLoading(true)
        axios.post(API.auth.passwordResetConfirm, {uid, token, values} )
            .then(res => {
                resetForm()
                setSuccess(true)
            })
            .finally(() => setLoading(false))
    }

    return (
        <div>
            {success && "You will receive a verification email."}
            {loading && "Loading..."}
            <Formik
                initialValues={{
                    new_password1: '',
                    new_password2: '',
                }}
                onSubmit={handleSubmit}>

                {({ errors, touched }) => (
                    <Form>
                        <Field name="new_password1">
                            {({ field, form }) => (
                                <label className="mt-3 block">
                                    <span className="text-gray-700">New password</span>
                                    <input
                                    {...field}
                                    type="text"
                                    className="
                                        mt-1
                                        block
                                        w-full
                                        rounded-md
                                        border-gray-300
                                        shadow-sm
                                        focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                                    "
                                    placeholder=""
                                    style={
                                        form.touched.new_password1 && form.errors.new_password1 ? (
                                            { border: '2px solid var(--primary-red)'}
                                        ) : null
                                    }
                                    />
                                </label>
                            )}
                        </Field>
                        <Field name="new_password2">
                            {({ field, form }) => (
                                <label className="mt-3 block">
                                    <span className="text-gray-700">New password</span>
                                    <input
                                    {...field}
                                    type="text"
                                    className="
                                        mt-1
                                        block
                                        w-full
                                        rounded-md
                                        border-gray-300
                                        shadow-sm
                                        focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
                                    "
                                    placeholder=""
                                    style={
                                        form.touched.new_password2 && form.errors.new_password2 ? (
                                            { border: '2px solid var(--primary-red)'}
                                        ) : null
                                    }
                                    />
                                </label>
                            )}
                        </Field>
                        <button className="mt-3 bg-blue-100 rounded-md shadow-sm text-lg px-5 py-3 hover:bg-blue-200" 
                            type="submit">
                            Submit
                        </button>
                    </Form>
                )}

            </Formik>
        </div>
    )

}

Answer 1

到un-nestvalues可以使用spread syntax.

console.log({ uid, token, ...values });
// {
//   uuid: "1",
//   token: "asdf",
//   new_password1: "Password123",
//   new_password2: "Password123",
// }

请注意，如果 values 包含键 uid 或 token，它将覆盖 uid/token 的值。所以你必须确保 in 只包含白名单密钥。

或者您可以颠倒顺序。 { ...values, uid, token }。这将首先设置 values 的 key/values，然后设置 uid 和 token 的值（如果存在则覆盖之前的值）。

const uid = "1";
const token = "asdf";
const values = {
  new_password1: "Password123",
  new_password2: "Password123",
  uid: "2",
};

console.log({ uid, token, ...values });
console.log({ ...values, uid, token });

React: Uncaught (in promise) Error: Request failed with status code 400

React: Uncaught (in promise) Error: Request failed with status code 400

javascript

reactjs

axios