React Native中Formik表单值无法随ComponentDidUpdate更新求助

Alright, let's dig into why your Formik values aren't updating and fix this step by step. The core issues here are related to Formik's initialization behavior, inconsistent field naming, and incorrect submission logic in your settings modal.

1. Fix Inconsistent Field Naming #

First, notice that in your Home.js you're using camelCase field names (pickupLocation, dropoffLocation), but in VansFilterModal you switched to lowercase (pickuplocation, dropofflocation). This mismatch means when you send the updated values to your Redux action, it's not mapping correctly to the API request body.

Update your VansFilterModal Formik initialValues and inputs to use the same camelCase names:

<Formik
  initialValues={{ 
    pickupLocation: homeScreenData.pickupLocation, 
    dropoffLocation: homeScreenData.dropoffLocation 
  }}
  // We'll add more props here in the next step
>
  {({ handleChange, values, handleSubmit }) => (
    <View>
      <Input
        value={values.pickupLocation}
        onChangeText={handleChange('pickupLocation')}
        placeholder="Pick up location"
      />
      <Input
        value={values.dropoffLocation}
        onChangeText={handleChange('dropoffLocation')}
        placeholder="Dropoff location"
      />
      {/* Add a submit button to trigger the update */}
      <Button title="Update Locations" onPress={handleSubmit} />
    </View>
  )}
</Formik>

2. Make Formik Reinitialize When Props Change #

Formik's initialValues only sets the form state once when the component mounts. If you want the form to update when the homeScreenData changes (e.g., if you navigate back and forth), you need to enable enableReinitialize. We'll also add the onSubmit handler here to send updated values to your API:

<Formik
  initialValues={{ 
    pickupLocation: homeScreenData.pickupLocation, 
    dropoffLocation: homeScreenData.dropoffLocation 
  }}
  enableReinitialize={true} // Forces Formik to refresh when initialValues change
  onSubmit={(values) => {
    // Call your Redux action with the updated values
    this.props.submitLocationToServer(values, this.props.pickupDate);
    // Optional: Close the modal after successful submission
    this.props.hideVansFilter();
  }}
>
  {/* ... input components ... */}
</Formik>

3. Remove Broken componentDidUpdate Code #

Your current componentDidUpdate block doesn't do anything useful—it defines an arrow function but never calls it, and there's no source for the values parameter. Delete this code entirely, since submission logic belongs in Formik's onSubmit:

// Delete this entire block
componentDidUpdate() {
  const { pickupDate, submitLocationToServer, responseMsg } = this.props;
  (values) => submitLocationToServer(values, pickupDate);
  console.log(responseMsg._embedded);
}

4. Verify Navigation Params #

Double-check that homeScreenData is being retrieved correctly from navigation params. If you're using a newer React Navigation version, getParam is deprecated—you'd use this.props.route.params.formData instead, but your current code should work for older react-navigation versions. Just ensure the params are passed correctly from Home.js when navigating.

Quick Additional Check #

In your Home.js, you reference pickupDate in the onSubmit handler but it doesn't appear to be defined in the component. Make sure this variable is properly declared or passed as a prop to avoid errors.

That should resolve the issue where your API was receiving old values—now when you modify locations in the modal and submit, it'll send the updated data to your server.

内容的提问来源于stack exchange，提问作者Zain Shabir