无效钩子调用.是否有可能在函数组件的外部调用钩子或异步函数?

Question

是否有一种方法可以使此工作而不改变我的功能组件为基于类的组件:

export default function SendVerificationCode({
route,
navigation
}: NativeStackScreenProps<
NativeStackParameterList,
'SendVerificationCode'
>): JSX.Element {
async function getVerificationCode(
passwordApi: PasswordApi,
agencyKey: number,
username: string,
email: string,
verificationCode: string
): Promise<void> {
const response = await passwordApi.getReset(
new GetResetRequest({
agencyKey: agencyKey,
email: email,
username: username,
verificationCode: verificationCode
})
);
verifyCodeContext.userName = username;
navigation.navigate('VerifyCode', {
copyrightYear: 2021,
version: '0.0.0.1'
});
}
const onSubmit = (data: any) => {
getVerificationCode(
new PasswordApi(),
1234,
data.username,
data.email,
'123'
);
};
return (
<UnauthenticatedTemplate copyrightYear={year} version={version}>
<Form
style={styles.form}
submitText="Send Code"
onSubmit={onSubmit}
schema={SendVerificationCodeSchema}
>
<FCTextField name="username" placeholder="Username" />
<FCTextField name="email" placeholder="Email" />
</Form>
</UnauthenticatedTemplate>
);
}

在我调用getVerificationCode

之前，onSubmit工作得很好我的axios函数getset看起来像:

public getReset(
getResetRequest: GetResetRequest,
cancelToken?: CancelToken
): Promise<StandardResponse<GetResetResponse>> {
return this.get(
this.configuration.portal,
'/mvc/api/password/reset',
classToPlain(getResetRequest, BaseApi.classTransformOptions),
cancelToken,
new StandardResponse<GetResetResponse>(GetResetResponse)
);
}

Answer 1

在你的应用程序的某个地方，你调用一个钩子(函数开始使用如useState)内的函数不是一个React组件，我不认为问题是在你所包含的代码片段，也许问题是在屏幕你导航到?

通读你的代码，寻找钩子，并确保它们不在函数中，例如:

// Right implementation
function SomeComponent(props) {
const hook = useHook()
return <View />
}
// Wrong implementation
function SomeComponent(props) {
function nestedFunction() {
const hook = useHook()
}
return <View />
}

希望对你有帮助