我可以将 API 中的信息放到另一个页面吗？

Question

The title is the best I can really phrase it, however, heres my Microsoft Paint version of what I'm trying to do. If you guys know how to do it feel free to reply.

Heres what it is doing

Heres what I want it to do

Sorry for the bad drawings not the most artistic.

Answer 1

React basically is a single page application so one way in doing what you want is to use react-router-dom when the submit button is clicked, you send the form data to the backend and then dispatch a new route that will display the component that has the API data. inside the componentDidMount life cycle of the component that will display the api data you make a fetch to get the data.

Answer 2

I'm not sure whats the use case you are trying to solve, but I will assume that it is something similar to how search could work. ie: You enter something in input fields, push submit button -> hide form you are currently in and show results in next page.

Pseudo code could look like this

class Search extends React.Component {
  state = {
    query: "",
    results: null
  }

  handleOnChange = e => {
    this.setState({query: e.target.value})
  }

  formSubmit = () => {
    //do your request to api
       .then(response => this.setState({results: response}))
  }

  render() {
    return(
      this.state.results === null ? (
        <form>
           <input type="text" value={this.state.query} onChange={this.handleOnChange}/>
           <button type="submit" onClick={this.formSubmit}>Submit</button>
        </form>
      ):(
        <div>{this.state.results}</div>
      )
    ) 
  }
}