繁体   English   中英

分页反应搜索,没有double setState

[英]React search with pagination without double setState

我正在React中实现分页搜索。 到目前为止,我几乎没有找到它的示例,但是它们都在AJAX调用后端之前和之后都使用带有double setState()代码。 例如,我当前的解决方案是:

import React from "react"
import PropTypes from "prop-types"

import SearchField from "components/SearchField"
import SearchResults from "components/SearchResults"

import Item from "models/Item"

class Search extends React.Component {
  constructor() {
    super()
    this.state = {
      query: "",
      page: 1,
      foundItems: []
    }
    this.handleSearch = this.handleSearch.bind(this)
    this.handlePageChange = this.handlePageChange.bind(this)
  }

  updateSearchResults() {
    const query = this.state.query
    const params = {
      page: this.state.page
    }
    Item.search(query, params).then((foundItems) => {
      this.setState({ foundItems })
    })
  }

  handleSearch(event) {
    this.setState({
      query: event.target.value
    }, this.updateSearchResults)
  }

  handlePageChange(data) {
    this.setState({
      page: data.selected + 1
    }, this.updateSearchResults)
  }

  render() {
    return (
      <div className="search">
        <SearchField onSearch={this.handleSearch} />
        <SearchResults
            onPageChange={this.handlePageChange}
            onSelect={this.props.onSelect}
            items={this.state.foundItems}
        />
      </div>
    )
  }
}

Search.propTypes = {
  onSelect: PropTypes.func.isRequired
}

export default Search

我知道我可以更改updateSearchResults接口以接收查询和页面作为参数,然后可以避免首先使用setState在此处传递值,但这似乎不是一个好的解决方案,因为当搜索参数列表增加时(排序顺序) ,页面大小(例如过滤器)),那么它会变得笨拙。 另外,我不喜欢以这种方式在handleSearchhandlePageChange函数中进行手动状态预管理的想法。 我正在寻找更好的实施方案。

我不确定您要问什么,但是您可以通过执行以下操作来优化代码:

class Search extends React.Component {
  constructor() {
    super()

    this.page = 1;
    this.query = "";
    this.state = {
      foundItems: []
    }
    this.handlePageChange = this.handlePageChange.bind(this)
  }

  updateSearchResults(event) {    
   if(typeof event === "object")
      this.query = event.target.value;

    const params = {
      page: this.page
    }
    Item.search(this.query, params).then((foundItems) => {
      this.setState({ foundItems })
    })
  }

  handlePageChange(data) {    
    this.page = data.selected + 1;
    this.updateSearchResults();
  }

  render() {
    return (
      <div className="search">
        <SearchField onSearch={this.updateSearchResults} />
        <SearchResults
            onPageChange={this.handlePageChange}
            onSelect={this.props.onSelect}
            items={this.state.foundItems}
        />
      </div>
    )
  }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM