Повторно визуализировать предыдущий поиск в истории браузера с помощью response-router-dom - PullRequest
0 голосов
/ 23 апреля 2019

Я не хочу израсходовать мое приветствие ... но я пытаюсь передать состояние в объекте местоположения, чтобы я мог выполнить предыдущий поиск при возврате из другого вида компонента.До сих пор я наивно пытался:

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()
  }

Что работает, но я слишком устал, чтобы проверять прямо сейчас.Если кто-нибудь увидит что-то еще, что мне нужно сделать, пожалуйста, не стесняйтесь, мне нужно закончить это.Еще раз спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...