Formik调用setFieldValue提示undefined 图片上传功能报错如何解决？

• 你调用setFieldValue的对象错误：Formik 向内部render函数传递的参数中不存在formProps属性，你代码里解构出来的formProps本身就是undefined，调用formProps.setFieldValue自然会抛出对应报错。实际上你已经在参数中直接解构出了setFieldValue方法，直接调用即可。
• 额外的代码问题：type为file的input不支持手动设置value属性，你给它绑定了value={values.serviceImage}会触发浏览器安全限制报错，该属性可以直接删除。另外存储图片文件时应该取event.target.files[0]而不是整个event.target。

调整render参数解构，删除不存在的formProps，修改input的onChange逻辑和属性，同时补上缺失的serviceName初始化值避免控制台警告：

import { Formik } from 'formik';

const AddProduct = (props) => {
  return (
    <Formik
      initialValues={{
        serviceName: '',
        serviceImage: null
      }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({
        errors,
        handleBlur,
        handleChange,
        handleSubmit,
        setFieldValue,
        isSubmitting,
        touched,
        values
      }) => (
        <form onSubmit={handleSubmit}>
          <TextField
            error={Boolean(touched.serviceName && errors.serviceName)}
            fullWidth
            helperText={touched.serviceName && errors.serviceName}
            label="Service name"
            margin="normal"
            name="serviceName"
            onBlur={handleBlur}
            onChange={handleChange}
            value={values.serviceName}
          />

          <Button>
            <input
              id="file"
              name="serviceImage"
              type="file"
              onChange={(event) => setFieldValue('serviceImage', event.target.files[0])}
            />
            Add an Image
          </Button>

          <Button type="submit">
            Post this service on the Events Platform
          </Button>
        </form>
      )}
    </Formik>
  );
};

内容的提问来源于stack exchange，提问作者John Shelby