React native 传递api结果时如何在表单验证后重定向的最佳实践

我已经使用ant设计组件设置了一个带有过滤器的表单。 一旦用户单击validation按钮，我的脚本就会检查输入，然后调用API

我想知道向用户显示api结果的最佳实践和最有效的方法是什么？我应该将用户重定向到包含结果的新页面，还是停留在同一页面上，显示结果而不是表单？我怎么能这么做？（如有任何示例或指向存储库的链接，将不胜感激）

这是我的密码：

import React, {Component} from 'react';
import {Form, Select, Button } from 'antd';

import 'antd/dist/antd.css';
import './main_filter.css';

class MainFilter extends Component {
    formRef = React.createRef();
  
    handleFormSubmit = event => {
      event.preventDefault();
      const category = this.formRef.current.getFieldValue("category");
      const time_limit = this.formRef.current.getFieldValue("time-limit");
      
      // ...
      // how to show the result to the user after calling the api ?
    };
  
    render() {
      return (
  
      <Form ref={this.formRef}
            onSubmit={this.handleFormSubmit}
            initialValues={{"category": ['a', 'b', 'c'], "time-limit": 'm30' }}>
  
          <div className="row container-center mt-4 mb-4">
  
              <Form.Item name="category" className="m-0">
                  <Select name="category">
                      <Option value='a'>{'a'}</Option>
                      <Option value='b'>{'b'}</Option>
                      <Option value='c'>{'c'}</Option>
                  </Select>
              </Form.Item>
  
              <Form.Item name="time-limit" className="m-0">
                  <Select name="time-limit">
                      <Option value='m20'>{'20 minutes'}</Option>
                      <Option value='m30'>{'30 minutes'}</Option>
                      <Option value='m40'>{'40 minutes'}</Option>
                  </Select>
              </Form.Item>
          </div>
  
          <div className="row d-flex justify-content-center p-3">
              <Button type="primary" size="large" onClick={this.handleFormSubmit} >Search</Button>
          </div>
      </Form>
  
      );
    }
  }

  class MainPageContent extends Component {
    render() {
      return (
      <div className="content">
          <div className="row h-100 align-items-center mr-0 pb-5">
              <div className="fixed offset-2">
                  <div className="container-center pt-1 pr-5 pl-5 pb-5">
                      <h2> TITLE </h2>
                  </div>
                  <div className="container-filter pt-4 pl-4 pr-4 pb-1">
                      <MainFilter/>
                  </div>
              </div>
          </div>
      </div>
      );
    }
  }
  
  export default MainPageContent;

import React，{Component}来自'React'；
从“antd”导入{Form，Select，Button}；
导入“antd/dist/antd.css”；
导入“/main_filter.css”；
类MainFilter扩展组件{
formRef=React.createRef（）；
handleFormSubmit=事件=>{
event.preventDefault（）；
const category=this.formRef.current.getFieldValue（“类别”）；
const time_limit=此.formRef.current.getFieldValue（“时间限制”）；
// ...
//调用api后如何向用户显示结果？
};
render（）{
返回(
{'a'}
{'b'}
{'c'}
{20分钟}
{30分钟}
{40分钟}
搜寻
);
}
}
类MainPageContent扩展组件{
render（）{
返回(
标题
);
}
}
导出默认主页内容；

谢谢