Reactjs - 从服务器获取数据并进行更新

Question

（这里反应新手）......

我正在使用Reactjs创建一个我有

的页面

• 一个简单的搜索框
• 搜索文本中的用户类型
• 从服务器获取数据并显示

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

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

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

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

但是使用上述功能，会发生以下情况

1. 已加载初始数据
2. 用户输入内容

3. 结果立即更新为仅显示包含搜索文本的结果（下面的代码），但同时请求服务器获取结果，其中结果包含搜索文本< / p>

   this.props.products.forEach（function（product）{   if（product.name.toLowerCase（）。indexOf（this.props.searchText）＆gt; -1）{     row =     rows.push（行）   } } .bind（本））;

4. 大约一秒钟后，从服务器收到新数据，结果再次刷新。

显然我想做的是

1. 加载初始数据
2. 用户类型搜索文字
3. 从服务器请求数据
4. 从服务器接收数据
5. 更新结果

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

Answer 1

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

让我们说，data是一个州财产。您可以将回调传递给loadDataFromServer，并且一旦在onsuccess this.loadDataFromServer(searchText, function(data) { this.setState({data: data}}; }); 上获取数据，loadDataFromServer会调用此回调。

{{1}}

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

Answer 2

那么，这只是你想要停止的第一次刷新吗？

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