Question

我正在使用“加载更多”按钮来一次显示2个结果。在下面的屏幕截图中，用户单击了一次LOAD MORE，因此将显示所有3个结果。

当用户离开页面并返回时，我想存储pageNo的最后一个值，并用它来显示结果数。

这可能是一行代码的更改，但我不知道。

我正在使用Redux并能够存储诸如searchedOnce（布尔值）之类的状态。但是对于这种特殊状态-pageNo，我无法应用将增量值保存在Redux中。当用户离开页面并返回时，pageNo的状态将更改回初始值为1。我期望它为2，因为这是最后一个处于redux状态的值。我认为我的loadMoreClick（）中的调度行需要更改。

    import React, { Component } from 'react'
import { get } from 'axios'
import { connect } from 'react-redux'
import { FadeIn } from 'animate-components'
import { getSearchResults, setSearchedOnce, setPageNum } from '../../actions/searchresults'
import SearchResult from './Result/searchResult'
import SearchNoResult from './Result/searchNoResult'

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.props.dispatch(setSearchedOnce(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.props.dispatch(setPageNum(this.state.pageNo))
    this.state.pageNo +=1
  }

  render() {
    const { users } = this.props
    let mapPageNo = this.props.pageNo
    let map_usersList = users.data && users.data.slice(0, this.state.pageNo * 2).map((userlist => (
      <SearchResult key={userlist.id} {...userlist} />
    )))
    let mapSearchedOnce = this.props.searchedOnce
    return (
      <div>
      <FadeIn duration="300ms">
        <div className="mid_rig_inner">
          <div className="mid_inner">
            <ul>
            { mapSearchedOnce
              ?  map_usersList
              :  <SearchNoResult/>
            }
            {
              mapSearchedOnce ?
              (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 type="button" className="btn btn-primary" onClick={this.loadMoreClick.bind(this)}>
                   Load More
                </button>
              </div>
              : ''
            }
            </ul>
          </div>
          <div className="rig_inner">
          <div className="my-4">
            <div className="recomm">

                  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>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>


  }
}

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

export default connect(mapStateToProps)(SearchAdvanced)

Answer 1

请勿将本地状态用于pageNo。看来您的组件具有pageNo作为道具和局部状态。这会使开发人员感到困惑，甚至可能使您绊倒。如果this.props.dispatch(setPageNum(this.state.pageNo))正确地将pageNo存储在化简器中，则仅依靠this.props.pageNo。完全从您的本地州删除pageNo。

卸载组件时，本地状态被破坏。因此，当用户向后导航时，this.state.pageNo被重置。卸载组件后，存储在redux中的pageNo值将不会重置。

尝试将this.state.pageNo替换为this.props.pageNo。请记住，您不能直接修改this.props.pageNo。您只能通过setPageNum操作创建者来执行此操作。即this.props.dispatch(setPageNum(this.props.pageNo + 1))或您要设置的任何内容。

React Redux-递增状态变量不起作用

1 个答案: