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

Question

(这里是 reactjs 新手)...

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

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

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

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

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

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

但是有了上面的函数，会发生下面的事情

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

3. 结果立即更新为只显示包含搜索文本的结果(下面的代码)，但同时向服务器发出请求以获取结果包含搜索文本的结果

   this.props.products.forEach(函数(产品){ if(product.name.toLowerCase().indexOf(this.props.searchText) > -1) { 行 = 行.推(行) }}.bind(this));

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

很明显我想做的是

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

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

Answer 1

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

比方说，data 是一个状态属性。您可以将回调传递给 loadDataFromServer，loadDataFromServer 在 onsuccess 上获取数据后调用此回调。

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

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