ReactJS在prop

Question

作为序言，我还是React的新手，所以我仍然在摸索着自己的方式。

我所拥有的是一个获取数据以呈现HTML表的组件。因此，我在fetchData()内调用我的操作'fetch()（使用浏览器的componentWillMount() API），其中还有一个用于更改商店的监听器。这一切都运行良好，我能够检索和呈现数据。

现在下一步。我希望能够在组件的props更新时获取新数据。但我不确定这样做的正确方法是什么。所以我有一个三部分问题

1. 在验证道具确实发生了变化之后，在fetchData()找到componentWillReceiveProps()新道具的适当位置会不会？
2. 我的API相当慢，所以当fetch仍在运行时，完全有可能会出现新的道具。是否可以取消旧的获取并启动新的获取，或至少实现逻辑以忽略原始结果并等待较新的获取结果？
3. 与上述问题相关，除了在Action的状态（或其他地方）有类似isLoading布尔值的东西之外，有没有办法确保只有一个fetch正在运行？

Answer 1

是的，componentWillReceiveProps是适当的地方。

关于第2点和第3点：

取消任务并保持“一次运行”的想法似乎不够。我不认为这种解决方案应该在任何系统中使用，因为实现会限制应用程序的设计效率。

  

是否可以取消旧的获取并启动新的获取，或者至少实现逻辑以忽略原始结果并等待较新获取的结果？

为什么不让'较新的获取'响应覆盖'旧的获取'响应？

如果你真的想避免显示旧的响应，你只需使用所有fetchData调用的计数器就可以实现它。您可以通过以下方式实现它：

var ApiClient = {
    processing: 0,
    fetchData: function(){
        processing++
        return yourLibForHTTPCall.get('http://endpoint').then(function (response)){
            processing--
            return response
        }
    },
    isIdle: function(){
        return processing == 0
    }   
}

以及实际拨打电话的地方：

apiClient.fetchData(function(response){
    if(apiClient.isIdle()){
        this.setState({
      })
    }
}

我希望yourLibForHTTPCall.get在您的案例中返回Promise。