Reactjs - 从服务器获取数据并更新答案

【问题标题】：Reactjs - getting data from server and updatingReactjs - 从服务器获取数据并更新
【发布时间】：2014-06-06 07:16:39
【问题描述】：

（reactjs 新手在这里）...

我正在使用 Reactjs 创建一个我拥有的页面

一个简单的搜索框
用户输入搜索文本
从服务器获取数据并显示

现在，“searchText”和“data”是我的状态，我试图弄清楚如何仅在从服务器接收到数据后更新“结果”。

我有一个事件，每当用户输入某些内容作为搜索文本时，我都会处理该事件

    handleUserInput: function(searchText) {
      this.loadDataFromServer(searchText);

      this.setState({
        searchText: searchText,
      });
    },

但是使用上面的函数，会发生以下事情

初始数据已加载
用户输入内容
结果立即更新为仅显示包含搜索文本的结果（代码如下），但同时向服务器发出请求以获取结果包含搜索文本的结果

this.props.products.forEach(function(product) { if(product.name.toLowerCase().indexOf(this.props.searchText) > -1) { 行 = 行.推（行） } }.bind(this));
大约一秒钟后，从服务器接收到新数据并再次刷新结果。

显然我想做的是

加载初始数据
用户键入搜索文本
向服务器请求数据
从服务器接收数据
更新结果

实现这一目标的正确方法是什么？

【问题讨论】：

在第 3 步中，是什么将结果列表过滤为“仅包含搜索文本的结果”？
我已经添加了部分 - 它只是检查名称是否包含搜索文本。

标签： javascript reactjs

【解决方案1】：

不要认为 searchText 本身就是一个状态。您可以只使用从服务器获取的数据来设置状态。

假设data 是一个状态属性。您可以将回调传递给 loadDataFromServer，并且一旦在 onsuccess 上获取数据，loadDataFromServer 就会调用此回调。

this.loadDataFromServer(searchText, function(data) {
  this.setState({data: data}};
});

这样，一旦数据更新，组件将重新渲染并显示结果。

【讨论】：

【解决方案2】：

所以，这只是您想要停止的第一次刷新，对吗？

如果结果来自服务器后它已经在刷新，那么您似乎只需要在步骤 3 中过滤客户端上的结果 - 然后将生成与最初相同的虚拟 DOM，所以结果列表只会在服务器响应后更新实际的 DOM。

【讨论】：