React Native子组件更新HomeScreen的zipcode状态问题

核心思路 #

父组件维护zipcode状态和对应的更新函数setZipcode，将更新函数通过props传递给子组件，子组件在提交新邮编时直接调用该函数，即可同步更新父组件的状态。

具体修改步骤 #

1. 修改HomeScreen传递给子组件的props #

在HomeScreen中，给ChangeZipcode组件传递当前邮编和父组件的状态更新函数：

// HomeScreen中渲染ChangeZipcode的部分
<ChangeZipcode 
  currentZipcode={zipcode} 
  onZipcodeChange={setZipcode} 
  // 其他必要props，比如控制模态框显示的状态等
/>

2. 重构ChangeZipcode组件 #

去掉子组件内部不必要的zipcode状态，直接利用父组件传递的初始值和更新函数：

export function ChangeZipcode(props) {
  const { currentZipcode, onZipcodeChange } = props;

  // 初始化Formik的初始值为父组件传递的当前邮编
  const initialValues = () => ({
    zipcode: currentZipcode || ""
  });

  const formik = useFormik({
    initialValues: initialValues(),
    validationSchema: validationSchema(),
    validateOnChange: false,
    onSubmit: async (formValue) => {
      try {
        const zipcodeNew = formValue.zipcode;
        // 直接调用父组件的更新函数，同步更新父组件的zipcode状态
        onZipcodeChange(zipcodeNew);
        // 可添加提交后的逻辑，比如关闭模态框、提示成功
        Toast.show({
          type: "success",
          position: "bottom",
          text1: "邮编更新成功"
        });
      } catch (error) {
        Toast.show({
          type: "error",
          position: "bottom",
          text1: "Error updating the zipcode",
        });
      }
    }
  });

  // 剩余表单渲染逻辑...
}

3. 修正原代码中的错误 #

• 原代码在onSubmit函数内部使用useEffect违反了React Hook规则：Hook只能在组件顶层作用域调用，不能嵌套在普通函数中。
• 子组件无需自行维护zipcode状态，直接调用父组件的setZipcode就能完成状态同步。

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