单击后退按钮时，反应结果将重置

Question

我正在使用React Redux。我有一个搜索表单，其中显示了如下所示的结果：

Image showing Search results

当用户单击某个项目以查看配置文件并希望返回BACKE搜索结果时，他们单击BACK按钮。

单击后退按钮后，将清除该表单，搜索结果消失，如下所示。 Image when BACK button is clicked and State 令人困惑的是，redux状态仍然相同，并且具有GET_RESULTS的数据。

这是我的组件代码：

import React, { Component } from 'react'
import { get } from 'axios'
import { connect } from 'react-redux'
.....

class SearchAdvanced extends Component {
  constructor(props) {
    super(props)
    this.state = { formValues: {}, searchedOnce: false, users: [], pageNo: 1 }
  }

  handleChange(event) {
    event.preventDefault()
    let formValues = { ...this.state.formValues }
    let name = event.target.name
    let value = event.target.value
    formValues[name] = value
    this.setState({ formValues })
  }

  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      searchedOnce: true,
    })
    const apiSearchURL = `/api/search/religion/${this.state.formValues.religion}/gender/${this.state.formValues.gender}`
    get(apiSearchURL, { maxContentLength: 400 })
    .then((searchResults) => {
      this.props.dispatch(getSearchResults(searchResults))
    })
  }

  loadMoreClick() {
  this.setState({
    pageNo: this.state.pageNo + 1,
    })
  }

  render() {
    const { users } = this.props
    let map_usersList = users.data && users.data.slice(0, this.state.pageNo * 2).map((userlist => (
      <SearchResult key={userlist.id} {...userlist} />
    )))

    return (
      <div>
      <FadeIn duration="300ms">
        <div className="mid_rig_inner">
          <div className="mid_inner">
            <ul>
            { this.state.searchedOnce
              ?  map_usersList
              :  <SearchNoResult/>
            }
            {
              this.state.searchedOnce ?
              (this.state.pageNo * 2 >= 3)
              ?
              <div className="text-center my3 text-danger">
                No more profiles. Try to modify search criteria.
              </div> :
              <div className="text-center my3">
              <button className="btn btn-sm btn-success" onClick={this.loadMoreClick.bind(this)}>
                   Load More
                </button>
              </div>
              : ''
            }
            </ul>
          </div>
          <div className="rig_inner">
          <div className="my-4">
            <div className="recomm">
              <div className="recomm_top">
                <span>Search</span>
              </div>
            </div>
            <div className="search_advan_box">
              <form onSubmit={this.handleSubmit.bind(this)}>
                <select
                  name="religion"
                  className="mb-2"
                  value={this.state.formValues['religion']}
                  onChange={this.handleChange.bind(this)}
                >
                  <option value="" disabled="">
                    Select Religion
                  </option>
                  <option value="Any">Any Religion</option>
                  <option>Christian</option>
                  <option>Hindu</option>
                  <option>Muslim</option>
                  <option>Jain</option>
                  <option>Buddhist</option>
                  <option>Sikh</option>
                  <option>Parsi</option>
                  <option>Jewish</option>
                  <option>Spiritual</option>
                  <option>No Religion</option>
                  <option>Other</option>
                </select>

                <select
                  name="gender"
                  className="mb-2"
                  value={this.state.formValues['gender']}
                  onChange={this.handleChange.bind(this)}
                >
                  <option value="" disabled="">
                    Select Gender
                  </option>
                  <option>Male</option>
                  <option>Female</option>
                  <option>Other</option>
                </select>
                <input
                  type="submit"
                  className="my-4 btn btn-primary p2"
                  value={this.state.searchedOnce ? "Refine Results":"Search Profiles"}
                />
              </form>
            </div>
          </div>

          </div>
        </div>
        </FadeIn>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  users: state.Result.users
})

export default connect(mapStateToProps)(SearchAdvanced)

我正在使用React-Router 搜索页面网址为/search 个人资料页面的网址为/profile/pppp