Question

我的流程中有两个功能组件。首先，我需要由Formik和Yup填写和验证第一个组件信息，然后用户可以通过单击“下一步”处理第二个组件中的下一步。现在，我可以验证所有内容，并且代码可以毫无问题地到达handleSubmit（）。但是，问题在于，我无法使用this.name = this.name.trim(); if(name.length) { // do the database call } else { // prompt a message to let the user know that the particular field is empty }链接到另一个组件。我尝试过：

Intent intent = new Intent(getContext(), ThirdActivity.class);
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);

大多数情况下，使用这些代码我在控制台上都得到了未定义的输出。似乎我无法像在React类中那样从功能组件访问props。这是我的第一个组件：

<Link>

Answer 1

是的，我们不能在功能组件中使用this.props，但是我们可以做的是在父组件中编写相同的路由逻辑，并将其作为道具传递给功能组件。然后我们可以在import { Injectable, ErrorHandler, Input } from '@angular/core'; import { catchError, retry} from 'rxjs/operators'; import { Observable, throwError } from 'rxjs'; @Injectable ({ providedIn: 'root' }) export class errorHandler implements HttpInterceptor{ constructor(){ } intercept(request : HttpRequest<any>, handler : HttpHandler) : Observable<HttpEvent<any>>{ return handler.handle(request) .pipe( retry(1), catchError((error : any) => { console.log('---->'+request.headers.get('content-disposition')); let errorMessage = ''; if(error.error instanceof ErrorEvent) errorMessage = `Error : `+error.error.message; else errorMessage = `Error Code : `+error.status +`\nMessage : `+error.message; return throwError(JSON.stringify(errorMessage)); }) ) } }```中调用相同的函数。

Answer 2

如果您使用钩子，则可以按照本博客文章https://dev.to/httpjunkie/programmatically-redirect-in-react-with-react-router-and-hooks-3hej中所述的方法，以编程方式使用react-router和钩子进行重定向。摘要：

在您的导入中包含useState：

import React, { useState } from 'react';

在功能组件内部添加：

const [toNext, setToNext] = useState(false)

在handleSubmit内添加：

setToNext(true)

在<form>内：

{toNext ? <Redirect to="/Next" /> : null}

如何在handleSubmit formik中链接到下一页URL？

2 个答案: