使用react-router-dom

Question

我不想用完我的欢迎语...但是我试图在位置对象中传递状态，以便在从其他组件视图返回时可以呈现上一个搜索。到目前为止，我已经天真地尝试过：

getData = async () => {
    let {searchTerm} = this.state
    let b0 = this.props.location.state ? this.props.location.state.books : []
    if(b0.length !== 0){
      this.setState({books:[...b0]})
      return
    }
    else
    if(searchTerm && searchTerm.length >= 2){
      this.setState({isLoading:true})
      await axios.get(`http://localhost:7000/books/search/${searchTerm}`)
      .then(resp => {
        this.setState({books:[...resp.data.books]})
        this.props.history.push({pathname: '/search', search: `?term=${searchTerm}`, state: {books:[...resp.data.books]}})
      })
      .catch(error => {
        console.log(error)
        this.setState({hasError:true,isLoading:false})
      })
    }
    this.setState({isLoading:false})
  }

这当然很失败-网址栏中的url更新正确，但没有数据。我知道这是我所缺少的基本知识，因此我们将不胜感激。一如既往，谢谢。

更新：

查看日志后，我意识到我可以将逻辑从getData中分离出来，并创建另一个函数并使用生命周期钩子：

  testTheory = () => {
    let b0 = this.props.location.state ? this.props.location.state.books : []
    if(b0.length > 0){
      this.setState({books:[...b0]})
      return
    }
  }

  getData = async () => {
    let {searchTerm} = this.state

    if(searchTerm && searchTerm.length >= 2){
      this.setState({isLoading:true})
      await axios.get(`http://localhost:7000/books/search/${searchTerm}`)
      .then(resp => {
        console.log(resp.data.books)
        this.setState({books:[...resp.data.books]})
        this.props.history.push({pathname: '/search', search: `?term=${searchTerm}`, state: {books:[...resp.data.books]}})
      })
      .catch(error => {
        console.log(error)
        this.setState({hasError:true,isLoading:false})
      })
    }
    this.setState({isLoading:false})
  }

  componentDidMount = () =>{
    this.testTheory()
  }

正在工作，但是我现在太累了，无法测试。如果有人看到我需要做的其他事情，请不要犹豫，我需要完成此操作。再次感谢。