Question

我是React的新手，所以我不知道获取数据的最佳方法。我有一个类似/country/japan的网页网址，这是我的组件：

var Country = React.createClass({

  componentDidMount: function() {
    var _this = this,
        country = _this.props.params.country;

    Axios.get('http://URL/?search=' + country)
      .then(function(result) {
        _this.setState({
          country: result.data[0]
        });
      });
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    var country = this.state.country;
    return (
      <div>
        <h1>{country.name}</h1>
      </div>
    );
  }

});

我似乎无法访问国家/地区数据。这样做的正确方法是什么？你怎么会触发404？

Answer 1

我想先说明一下表现形式和容器成分之间的区别。

演示组件：

关注事物的外观。
可以在其中包含表示和容器组件，并且通常具有一些自己的DOM标记和样式。通常允许通过this.props.children进行遏制。
不依赖于应用程序的其余部分，例如Flux操作或商店。
不指定数据的加载方式或变异方式。
仅通过道具接收数据和回调。
很少有自己的状态（当他们这样做时，它是UI状态而不是数据）。
除非需要状态，否则写为功能组件，
生命周期钩子或性能优化。
示例：页面，补充工具栏，故事，用户信息，列表。

容器组件：

关心事情的运作方式。
可以包含表示内容和容器组件**但是通常没有自己的DOM标记，除了一些包装div，从来没有任何风格。
向演示文稿或其他容器提供数据和行为组件。
调用Flux操作并将其作为回调提供给表达组件。
通常是有状态的，因为它们往往是数据源。
通常使用高阶组件生成，例如connect（）来自React Redux，来自Relay的createContainer（）或Container.create（）来自Flux Utils，而不是手工编写。
示例：UserPage，FollowersSidebar，StoryContainer， FollowedUserList。

您可以查看更多here。这将有助于您了解如何触发api调用（它应该在容器中）。

现在来看你的代码吧。我会说你的api代码移动到容器中并在容器内调用你的组件。

var CountryContainer = React.createClass({


 componentDidMount: function() {
       var _this = this,
        country = _this.props.params.country;

    axios.get('http://URL/?search=' + country)
      .then(function(result) {
         //200-300 response codes
         //update you state here with say variable data
      .catch(function(error){
          //400+ response codes
        }
      });

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    return (
      <Country data={this.state.data} />
    );
  }

});

我建议你去参考axios文档。他们清楚地提到API调用何时失败以及如何处理它：）

获取HTTP数据和处理404的最佳方法是什么？

1 个答案: