Question

正如您在下面的代码中看到的，我的ajax（我使用fetch）位于app组件的handleSearch函数中。如何在自己的组件中委托和进行ajax调用？我来自棱角分明1，有点像服务/工厂这样的东西，但我不确定如何做出反应。

const App = React.createClass({
  getInitialState() {
    return {
      username: '',
      profiles: [],
      noUser : false
    }
  },
  handleInputChange(e) {
    this.setState({
      username: e.target.value
    })
  },
  handleSearch() {
    if (!this.state.username) {
      alert('username cannot be empty');
      return false;
    }
    fetch('https://api.github.com/search/users?q=' + this.state.username)
      .then(response => {
        return response.json()
      }).then(json => {
        this.setState({
          profiles: json.items
        })

        if(json.items.length === 0){
          this.setState({noUsers : true});
        }else{
          this.setState({noUsers : false});
        }
      })
  },
  render() {
    return (
      <div>
            <input type="text" placeholder="Github username" onChange={this.handleInputChange} value={this.state.username} />
            <button onClick={this.handleSearch}>Search</button>
            {this.state.profiles.length > 0 &&
              <Users profiles={this.state.profiles} />
            }
            {this.state.noUsers &&
              <p>No users found.</p>
            }
          </div>
    )
  }
});

http://codepen.io/eldyvoon/pen/ENMXQz此代码需要进行大量重构。

Answer 1

您不需要在它自己的React组件中编写它，只需编写一个普通的旧Javascript CommonJS模块，然后通过require（）加载它或将其作为prop传递。

Answer 2

并非React中的所有内容都必须是组件。它本质上仍然是普通的旧Javascript。将API逻辑解压缩到其自己的模块/文件中，例如

<强> GithubApi.js

module.exports.getUsers = function(username) {
  return fetch('https://api.github.com/search/users?q=' + username)
  .then(response => {
    return response.json()
  })
}

然后在需要的地方使用它：

var GithubApi = require('/path/to/GithubApi.js');

const App = React.createClass({
  ..
  ..
  handleSearch() {
    if (!this.state.username) {
      alert('username cannot be empty');
      return false;
    }
    GithubApi.getUsers(this.state.username)
      .then(json => {
        this.setState({
          profiles: json.items
        })

        if(json.items.length === 0){
          this.setState({noUsers : true});
        }else{
          this.setState({noUsers : false});
        }
      })
  },
  ..
  ..

这只是一个例子 - 您希望如何设计模块取决于您希望它具体或灵活等等。

委托或使ajax调用一个组件

2 个答案: