我读过几个类似的问题，但显然没有解决方案。
我正在学习React并构建一个应该每10/15分钟连接一个API的应用程序。 为了连接，我发射了一个ajax请求。 但是我需要每10分钟触发一次ajax请求，因此我需要某种计时器。 如果我在render（）方法内调用方法fetchData，则会每调用1秒钟调用一次ajax请求。 即使我在渲染器中放置了setTimeout（），这也不适用于ajax请求（但它可以与其他操作（如console.log（））一起使用。
任何想法？ 基本上我需要每隔10分钟不断重复ajax请求，而不需要用户单击按钮或与应用程序进行交互。 启动应用程序时应该触发第一个请求。 谢谢！
fetchData = () => { var url = "http://url.json"; $.ajax({ url: url, dataType: "jsonp", success : this.parseResponse, error : function(req, err){ console.log('API call failed ' + err); } }) } render(){ //this.fetchData(); //this works but every 1 second setTimeout(() => { //this.fetchData(); //this won't work as expected console.log("timer"); //this works as expected }, 5000) return( <div> <button onClick={this.fetchData}></button> //this works as expected but I don't want this </div> ); }I've read a few similar questions but apparently no solutions.
I'm learning React and building an app which should connect to an API every 10/15 minutes. To connect, I am firing an ajax request. However I need the ajax request to be fired every 10 minutes therefore I'd need some sort of timer. If I call the method fetchData inside the render() method, the ajax request will be called every ~1 second. Even if I put a setTimeout() inside the render, this won't work with the ajax request (but it does work with other actions such as console.log()).
Any idea? Basically I need to continuously repeat the ajax request every 10 minutes without the user to click buttons or interact with the app. The first request should be fired when starting the app. Thanks!
fetchData = () => { var url = "http://url.json"; $.ajax({ url: url, dataType: "jsonp", success : this.parseResponse, error : function(req, err){ console.log('API call failed ' + err); } }) } render(){ //this.fetchData(); //this works but every 1 second setTimeout(() => { //this.fetchData(); //this won't work as expected console.log("timer"); //this works as expected }, 5000) return( <div> <button onClick={this.fetchData}></button> //this works as expected but I don't want this </div> ); }最满意答案
首先，您需要知道，如果要与api进行交互，则需要使用componentDidMount方法进行调用， 这是推荐的做法 。
然后为了连续调用你应该使用setInterval而不是setTimeout 。
fetchData = () => { var url = "http://url.json"; $.ajax({ url: url, dataType: "jsonp", success: this.parseResponse, error: function (req, err) { console.log('API call failed ' + err); } }) } componentDidMount () { // This will be called just once this.fetchData() this.interval = setInterval(() => { this.fetchData() }, 10000) } componentWillUnmount () { // It's necessary to do this otherwise the interval // will be executed even if the component is not present anymore. clearInterval(this.interval); } render () { return ( <div> ... </div> ) }如果你在render方法中调用fetchData ，你有可能进入一个无限循环，因为如果你在ajax完成时（或者出于任何原因）更新了state ，那么render将被执行并且fetchData方法也会被执行，一遍又一遍地发生，并使其最差fetchData将被间隔执行。
First you need to know that if you are going to interact with an api you need to make the call in the componentDidMount method it's a recommended practice.
Then for make a continuous call you should use setInterval instead of setTimeout.
fetchData = () => { var url = "http://url.json"; $.ajax({ url: url, dataType: "jsonp", success: this.parseResponse, error: function (req, err) { console.log('API call failed ' + err); } }) } componentDidMount () { // This will be called just once this.fetchData() this.interval = setInterval(() => { this.fetchData() }, 10000) } componentWillUnmount () { // It's necessary to do this otherwise the interval // will be executed even if the component is not present anymore. clearInterval(this.interval); } render () { return ( <div> ... </div> ) }If you call fetchData inside the render method you are running the risk of entering in an infinite loop because if you update the state when the ajax is done (or for any reason) then the render will be executed and the fetchData method too so this will happen over and over again and to make it worst fetchData will be executed in intervals.
更多推荐
发布评论