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

(这里反应新手)......

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

一个简单的搜索框

用户在搜索文本中键入

数据从服务器获取并显示

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

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

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

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

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

加载初始数据

用户输入的东西

结果是IMMEDIATELY更新为仅显示包含搜索文本的结果(下面的代码),但同时向服务器发出请求以获取结果,其中结果包含搜索文本

this.props.products.forEach(function(product){if(product.name.toLowerCase().indexOf(this.props.searchText)> -1){row = rows.push(row)}} .bind(this ));

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

显然我想做的是

加载初始数据

用户类型搜索文本

从服务器请求数据

从服务器接收数据

更新结果

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