React Native Formik表单中setFieldValue未找到变量问题求助

Hey there! The error you're seeing happens because you're trying to call setFieldValue as if it's a global variable, but it's actually a method provided by Formik and passed to your component via props. Let's walk through how to fix this:

1. Correctly reference setFieldValue from props #

In your Picker component, you're directly calling setFieldValue but forgetting to access it from the props that Formik injects. Since you're using a class component (evidenced by this.renderOption()), you need to prefix it with props.:

<View style={styles.FormGroup}>
  <Picker
    selectedValue={props.values.offenceId}
    style={{ height: 30, width: "90%" }}
    itemStyle={{ width: "50%", borderWidth: 0.5, borderColor: "#aaaaaa", height: 44 }} // Fixed the double # here too!
    onValueChange={(itemValue, itemIndex) => props.setFieldValue("offenceId", itemValue)}
    onBlur={props.handleBlur("offenceId")}
  >
    <Picker.Item label="Select Offence" value={0} />
    {this.renderOption()}
  </Picker>
</View>
{props.touched.offenceId && props.errors.offenceId ? (
  <View style={styles.errorMessage}>
    <Text>{props.errors.offenceId}</Text>
  </View>
) : null}

Note: I also fixed the borderColor value from ##aaaaaa to #aaaaaa—double hashes are invalid in CSS-like styles and would cause unexpected rendering issues.

2. Ensure your component is properly wrapped with Formik #

If the first fix doesn't resolve the issue, double-check that your form component is wrapped with Formik using either the withFormik higher-order component or the <Formik> component wrapper:

Option A: Using withFormik HOC (common for class components) #

import React from 'react';
import { withFormik } from 'formik';
import { View, Picker, Text } from 'react-native';

class OffenceForm extends React.Component {
  renderOption() {
    // Your logic to render picker options goes here
    return (
      <>
        <Picker.Item label="Speeding" value={1} />
        <Picker.Item label="Parking Violation" value={2} />
      </>
    );
  }

  render() {
    const { props } = this;
    return (
      // Your full form JSX including the Picker section above
    );
  }
}

// Wrap the component with Formik
const WrappedOffenceForm = withFormik({
  mapPropsToValues: () => ({ offenceId: 0 }), // Initial value for your field
  validationSchema: /* Your Yup validation schema (if used) */,
  handleSubmit: (values, { setSubmitting }) => {
    // Your form submission logic
    setSubmitting(false);
  },
})(OffenceForm);

export default WrappedOffenceForm;

Option B: Using the <Formik> component wrapper #

If you prefer this approach, make sure you're passing Formik's props down to your class component:

import { Formik } from 'formik';

// In your parent component or render method
<Formik
  initialValues={{ offenceId: 0 }}
  onSubmit={(values) => {
    // Handle form submission
  }}
>
  {(formikProps) => <OffenceForm {...formikProps} />}
</Formik>

3. Double-check prop references in your class component #

If you're still having issues, confirm that you're correctly accessing this.props in your render method. Avoid accidentally shadowing the props variable with another declaration that might override it.

That's it! The core issue was just missing the props. prefix when calling setFieldValue. Once you fix that and verify your Formik wrapping, the error should disappear.

内容的提问来源于stack exchange，提问作者Tharindu Sandaruwan