reactjs - TypeError：无法读取未定义的属性“setFieldValue”。Formik 无法识别 setFieldValue

Question

我正在尝试在我的表单上创建图像上传。问题是当我尝试将值更改为实际上传的文件时。我正在尝试使用 setFieldValue，但它说它是未定义的。下面是代码。任何想法为什么它是未定义的？我以为它带有Formik。

import { Formik } from 'formik';


const AddProduct = (props) => {

  return (
    <Formik
      initialValues={{
        serviceImage: null
      }}
      
      onSubmit={(values) => {
        console.log(values);
        
      }}
    >
      {({
        errors,
        handleBlur,
        handleChange,
        handleSubmit,
        setFieldValue,
        isSubmitting,
        touched,
        values,
        formProps
      }) => (
        <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"
              value={values.serviceImage}
              type="file"
              onChange={(event) => formProps.setFieldValue('serviceImage', event.target)
              }
            />
            Add an Image
          </Button>

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

Answer 1

你已经setFieldValue在你的 formik 回调函数中声明了

所以改成：

<input
  id="file"
  name="serviceImage"
  value={values.serviceImage}
  type="file"
  onChange={event => setFieldValue('serviceImage', event.currentTarget.files[0])}
/>;