Как видно из кода ниже, мой 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 этот код требует много рефакторинга.
Не все в Реактике должно быть компонентом. Это по существу простой старый 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});
}
})
},
..
..
Это всего лишь пример того, как вы хотите разработать свой модуль, зависит от вас, в зависимости от того, насколько конкретным или гибким и т.д. Вы этого хотите.
Вам не нужно записывать его в свой собственный компонент React, просто напишите простой старый Javascript CommonJS-модуль и загрузите его через require() или передайте его в качестве опоры.