分頁反應搜索，沒有double setState

Question

我正在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在此處傳遞值，但這似乎不是一個好的解決方案，因為當搜索參數列表增加時（排序順序） ，頁面大小（例如過濾器）），那么它會變得笨拙。 另外，我不喜歡以這種方式在handleSearch和handlePageChange函數中進行手動狀態預管理的想法。 我正在尋找更好的實施方案。

Answer 1

我不確定您要問什么，但是您可以通過執行以下操作來優化代碼：

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