React-Native：渲染不同组件时无法更新组件

Question

我有这个简单的组件登录：

function Login() {
  const [isFormValidState, setIsFormValidState] = React.useState(false);
  const [credentialState, setCredentialState] = React.useState();

  function getFormErrors(errors: any, dirty: boolean) {
    setIsFormValidState(!Object.keys(errors).length && dirty);
  }

  function getFormValues(values: any) {
    setCredentialState(values);
  }

  function doAction() {
    //credentialState rest call...
  }

  return (
    <View>
      <Text>Login</Text>
      <UserCredentialForm getFormValues={getFormValues} getFormErrors={getFormErrors}/>
      <Button title='Entra' disabled={!isFormValidState} onPress={doAction}/>
    </View>
  );
}

其中调用 UserCredentialForm：

export default function UserCredentialForm({ getFormValues, getFormErrors }) {
[...]
  return (
    <Formik innerRef={formRef} validationSchema={formSchema} initialValues={state.form} onSubmit={() => { }}>
      {({ handleChange, values, touched, errors, dirty }) => {
        getFormValues(values);
        getFormErrors(errors, dirty);
        return <React.Fragment>
          // <TextInput/>....              
        </React.Fragment>
      }}
    </Formik>
  );

[...]
}

在我的应用程序中导航时出现此错误：

React Native 无法在渲染不同组件 Formik 时更新组件 Login。

然后它向我指出登录组件setCredentialState内部处理程序中的错误。getFormValues我已经使用 ref 而不是状态解决了这个问题，但问题本身对我来说还没有解决。

如果我需要在子事件发生后更新父组件视图怎么办？

Answer 1

我认为你有无限循环的渲染，

您通过 getFormValues setState 和登录组件重新渲染使 UserCredentialForm 也重新渲染，因此它一次又一次地调用 getFormValues

您可以在 formik 更新值后在 useEffect 挂钩中调用 getFormValues(values)