Мне нужно отображать данные из нескольких запросов ajax, которые выполняются одним способом в отдельном файле.
Здесь метод ajax:
const Сonsts = ( () => {
function _getUsers(usernames) {
let users = [];
usernames.forEach( (username) => {
let u = $.getJSON('https://api.github.com/users/${username}')
.done( (data) => { u = data; });
users.push(u);
});
return users;
}
return {
getUsers: _getUsers
}
})();
Таким образом, мне нужны данные из запроса, который будет отображаться, как только я получу ответ с сервера.
Мне нужны данные, которые будут отображаться внутри этого компонента:
class Team extends React.Component {
constructor(props) {
super(props);
this.state = this.props.members;
}
componentDidMount() {
this.state.members = this.props.members;
}
render () {
console.log(this.state.members);
let members = this.state.members.map( (item, index) => {
console.log(item.responseJSON);
return (
<img src={item.avatar_url} key={index} />
)
});
return (
<div>
{members}
</div>
);
}
}
Я представляю компонент следующим образом:
// $aboutContent is a <div> container.
// Consts.team is the array of github usernames.
React.render(<Team members={Сonsts.getUsers(Сonsts.team)} />, $aboutContent);
но этот код дает мне Invariant Violation: Team.state: must be set to an object or null
и, конечно же, ничего не отображается.
Как я могу сделать свой компонент правильно отображаемым, даже если запрос ajax еще не закончен? Поэтому, в основном, мне нужно следующее поведение: пользователь открывает страницу; выполняется запрос ajax и в то же время компонент <Team/>
визуализируется ничем внутри, пустой div
'; как только запрос ajax будет завершен, и действительные данные будут сохранены в некоторой переменной внутри приложения, метод визуализации должен быть снова запущен и отобразить все данные.
Не могли бы вы помочь мне в этом?
Консоль.log будет запускаться несколько раз. Сначала с пустым state.members, когда происходит setState.
function _getUsers(usernames) {
let users = [];
usernames.forEach( (username) => {
let u = $.getJSON('https://api.github.com/users/${username}')
.done( (data) => { u = data; });
users.push(u);
});
return {members: users};
}
class Team extends React.Component {
constructor(props) {
super(props);
//this.state = this.props.members;
this.state = {members: []};
}
componentWillReceiveProps(nextProps) {
this.setState(_getUsers(nextProps.team));
}
render () {
console.log(this.state.members);
let members = this.state.members.map( (item, index) => {
console.log(item.responseJSON);
return (
<img src={item.avatar_url} key={index} />
)
});
return (
<div>
{members}
</div>
);
}
}
В верхнем компоненте.
React.render(<Team team={Сonsts.team} />, $aboutContent);
console.log(this.state.members)
из методаrender
всегда следующий: всякий раз, когда я попадаю на эту страницу,console.log
выполняется дважды: первый раз - это пустой array[]
, второй раз - это массив объектов, которые имеют следующие свойства:done: ()
error: ()
fail: ()
promise: (obj)
readyState: 4
responseJSON: Object
responseText: "...response string..."
status: 200
statusCode: (map)
statusText: "OK"
success: ()