делегировать или заставить AJAX вызвать компонент в реакции

-2

Как видно из кода ниже, мой ajax (я использую fetch) находится внутри функции handleSearch в компоненте App. Как я могу делегировать и сделать вызов 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 этот код требует много рефакторинга.

Теги:

2 ответа

0
Лучший ответ

Не все в Реактике должно быть компонентом. Это по существу простой старый 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});
        }
      })
  },
  ..
  ..

Это всего лишь пример того, как вы хотите разработать свой модуль, зависит от вас, в зависимости от того, насколько конкретным или гибким и т.д. Вы этого хотите.

Поделиться
  • 0
    здорово я получил картину.
0

Вам не нужно записывать его в свой собственный компонент React, просто напишите простой старый Javascript CommonJS-модуль и загрузите его через require() или передайте его в качестве опоры.

Поделиться
  • 0
    например как? передать его как опору означает, что это должен быть компонент реакции правильно?
  • 0
    Нет. Подставка может быть чем угодно. facebook.github.io/react/docs/typechecking-with-proptypes.html
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню