Javascript 不带双setState的分页响应搜索

我正在React中使用分页实现搜索。到目前为止，我发现很少有这样的例子，但它们都在AJAX调用后端之前和之后使用双

setState（）

。例如，我当前的解决方案是：

从“React”导入React
从“道具类型”导入道具类型
从“组件/搜索字段”导入搜索字段
从“组件/搜索结果”导入搜索结果
从“模型/项目”导入项目
类搜索扩展了React.Component{
构造函数（）{
超级（）
此.state={
查询：“”，
页码：1，
foundItems:[]
}
this.handleSearch=this.handleSearch.bind（this）
this.handlePageChange=this.handlePageChange.bind（this）
}
updateSearchResults（）{
const query=this.state.query
常量参数={
页面：this.state.page
}
搜索（查询，参数）。然后（（foundItems）=>{
this.setState（{foundItems}）
})
}
handleSearch（事件）{
这是我的国家({
查询：event.target.value
}，this.updateSearchResults）
}
handlePageChange（数据）{
这是我的国家({
页码：data.selected+1
}，this.updateSearchResults）
}
render（）{
返回(
)
}
}
Search.propTypes={
onSelect:PropTypes.func.isRequired
}
导出默认搜索

---

我知道我可以更改

updateSearchResults

的接口，将查询和页面作为参数接收，然后我可以避免首先

setState

在那里传递值，但这看起来不是一个好的解决方案，因为当搜索参数列表增加时（例如排序顺序、页面大小、过滤器）然后它会变得有点笨拙。另外，我不喜欢在

handleSearch

和

handlepage change

函数中以这种方式进行手动状态预管理。我正在寻找更好的实现。

我不完全确定您的要求，但您可以通过执行以下操作稍微优化代码：

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

类搜索扩展了React.Component{
构造函数（）{
超级（）
本页=1；
this.query=“”；
此.state={
foundItems:[]
}
this.handlePageChange=this.handlePageChange.bind（this）
}
updateSearchResults（事件）{
如果（事件类型==“对象”）
this.query=event.target.value；
常量参数={
佩奇：这个。佩奇
}
Item.search（this.query，params）。然后（（foundItems）=>{
this.setState（{foundItems}）
})
}
handlePageChange（数据）{
this.page=data.selected+1；
this.updateSearchResults（）；
}
render（）{
返回(
)
}
}

你的意思是你只想调用一次setState，而不是多次吗？还有，为什么你的查询对象需要是状态的一部分？为什么你不能将它存储在非状态变量中？@Alex是的，我想调用一次

setState

，因为我不喜欢这样做，它可能会使应用程序变慢。不是在这种情况下，但我只是要求有一个好的做法，有两个地方可以把你的州放进去不是很奇怪吗？似乎在这种情况下，我们使用

this.state

和

this.

作为两个容器来存放相同的东西this.not state。只有this.state是状态变量。其余的只是全局变量