Javascript react http请求在第二个请求后不会更改加载状态

我现在在react.js组件中使用react http request发送请求并处理响应。传递的URL参数与组件状态相关，因此当状态更改时，组件将重新呈现并更改组件显示

这在第一次请求时起作用。但是，我发现该组件在第二个请求之后没有返回{load:true}，我想知道如何解决这个问题

我尝试调用onRequest方法并设置组件的加载状态，但在请求完成后无法更改加载状态（因为呈现函数无法更改状态）

响应http请求：

我的代码如下：

var FilmList=React.createClass({
getInitialState:函数（）{
返回{
queryType:this.props.queryType
}
},
//…发出详细信息。
render:function（）{
返回(
{
（{错误，结果，加载}）=>{
如果（加载| |错误）{
返回
}
否则{
//在这里处理结果。
}
}
}
)
}

因此，我最初的建议是使用一些状态管理库（redux、mobx等），但不需要获得代码的工作示例，因此：

import fetch from 'whatwg-fetch'; // gives compatibility with older browsers

var FilmList = React.createClass({
    getInitialState: function(){
        return {
            queryType: this.props.queryType,
            content: null
        }
    },

    componentWillMount: function() {
      this.fetchContent();
    },

    fetchContent: function() {
        const uri = config.url.api + "/" + this.state.queryType;
        // You can use w/e you want here (request.js, etc), but fetch is the latest standard in the js world
        fetch(uri, {
          method: 'GET',
          // More properties as you see fit 
        })
        .then(response => response.json()) // might need to do this ;)
        .then(response => {
          this.setState({
            content: response
          })
        })

    },

    // ...

    render: function(){
        const content = this.state.content? (
          // render your content based on this.state.content
        ): (
          <Loading />
        )

        return content;
    }
});

import fetch from'whatwg fetch'；//提供与旧浏览器的兼容性
var FilmList=React.createClass({
getInitialState:函数（）{
返回{
queryType:this.props.queryType，
内容：空
}
},
componentWillMount:function（）{
this.fetchContent（）；
},
fetchContent:function（）{
const uri=config.url.api+“/”+this.state.queryType；
//您可以在这里使用所需的w/e（request.js等），但fetch是js世界中的最新标准
获取（uri{
方法：“GET”，
//更多您认为合适的属性
})
.then（response=>response.json（））//可能需要这样做；）
。然后（响应=>{
这是我的国家({
内容：答复
})
})
},
// ...
render:function（）{
const content=this.state.content(
//基于此.state.content呈现内容
): (
)
返回内容；
}
});

尚未测试此代码，但它有一些好处：

• http请求不依赖于React，React（理论上）应该适用于UI组件
• 获取机制是解耦的，可以在组件生命周期的任何时候重用
• 在我看来，更容易阅读，分为更小的逻辑块

---

我建议阅读。

在本例中，我阅读了react http请求的源代码，发现存在一个弱点，即在接受并发送第二个请求后，组件无法更新“加载”返回的状态

在此处手动更改加载状态有助于在收到每个请求后重置加载

我更改了这个库的源代码，并将pull请求发送给repo。它现在合并到master中，并弹出了一个新版本

见：

---

因此，这个问题可以通过将lib更新到发行版（目前是1.0.3）来解决.

为什么必须使用react-http-request？项目看起来很小，为什么不使用fetch或request.js呢？@ospfranco我对react.js很陌生，react-http-request是我第一次选择的。我阅读了request.js，发现这也需要我在请求更改后重新呈现组件，react-http request为加载/请求状态提供了深刻的实现。我实际上觉得react http request打破了用户界面和应用程序状态的良好封装，我将使用

fetch

提供一个答案，可能对您有所帮助。我尝试重新编写react http request的原始库代码，我发现d当调用componentWillReceiveProps函数时，此库没有将加载状态设置为

true

。在我重新添加此参数后，加载状态将被呈现。我在学习React时已经阅读了React.Component文档，我不太理解您对React http请求的看法。我阅读了React的代码-http请求，我认为它的状态控制对于react.js是非常可行的。希望看到您对此的进一步评论！react http请求的问题是，您直接将UI声明与http请求交织在一起，因此您获得了视图（

render

函数）直接执行HTTP请求，然后修改应用程序的状态（在您的情况下是隐式的）并返回一个新的UI，这完全打破了react的想法：您的UI应该是无状态函数，给定相同的输入，产生相同的输出。它可能会工作，但显然打破了react努力追求的o-so-nice理想。注意：如果您觉得这很有用，请不要忘了投票：）我不这么认为。我阅读了react http请求的源代码，它在组件中发送HTTP请求，在呈现中确实会隐式地更改应用程序的状态。但是，在您的情况下，如果我们从父组件查看这一点，会有什么区别？它仍然在父组件的呈现函数中发送HTTP请求吗？因为我认为子组件和父组件的生命周期是不确定的不一样。谢谢你的帮助！现在我对此更清楚了！对于这个项目，我通过更改源代码解决了这个问题（也发送了发布的PR），在以后的项目中，我将尝试其他方法。再次感谢！

// starts from Line 49
value: function componentWillReceiveProps(nextProps) {
  if (JSON.stringify(this.props) === JSON.stringify(nextProps)) {
    return;
  }

  this.request.abort();
  this.performRequest(nextProps);
}