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

私はあなたが求めているものを完全にはわからないが、あなたは少し、次の操作を行って、コードを最適化することができます：あなたは唯一の代わりに、複数回の、一度SETSTATEを呼び出したい

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