小编Fra*_*ank的帖子

我现在尝试使用 Formik 在 NextJs 13 (Typescript) 上创建一个表单。我创建的表单不起作用，然后我尝试添加示例代码片段，Formik如下所示。我创建的表单和 Formik 的示例都仅TypeError: React.createContext is not a function在控制台中返回。(sc_server)/./node_modules/formik/dist/formik.cjs.development.js我可以在另一行控制台错误中看到这一点。

import * as React from 'react';
import {
  Formik,
  FormikHelpers,
  FormikProps,
  Form,
  Field,
  FieldProps,
} from 'formik';

interface MyFormValues {
  firstName: string;
}

export const MyApp: React.FC<{}> = () => {
  const initialValues: MyFormValues = { firstName: '' };
  return (
    <div>
      <h1>My Example</h1>
      <Formik
        initialValues={initialValues}
        onSubmit={(values, actions) => {
          console.log({ values, actions });
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }}
      > …

我现在正在尝试在我的项目上创建带有文件上传的增删改查功能。我已经完成了创建部分，自从我new FormData()通过附加文件值并post使用 headers 从 axios 发送请求来实现该部分以来，一切都工作正常'Content-Type': 'multipart/form-data'。

但是，如果我传入'Content-Type': 'multipart/form-data'标头，axios 会发送一个空正文。如果我删除它，它会发送实际的对象，但不发送上传的文件。我正在使用 Laravel 后端在 NextJs 上实现此功能。

这是代码

      const formData = new FormData();
      formData.append('first_name', values.first_name);
      formData.append('last_name', values.last_name);
      formData.append('phone_no', values.phone_no);
      formData.append('profile_picture', values.profile_picture, 'bermuda.png');
      formData.append('password', values.password);

      await axios
        .put(`/api/v1/users/${user.member_no}`, formData, 
         {
           headers: {'Content-Type': 'multipart/form-data'}
         })
        .then((res) => {
          console.log(res.data);
          if (res.status === 201) {
            toast.success('Member updated successfully.');

            refreshUser(); // mutating the swr request
          }
        })
        .catch((err) => {
          toast.error(err.response.data.message);
        });

      setLoading(false);
    },

console.log(res.data)如果我传递 multipart/form-data，则从 axios 返回 …