ReactJS. Рендеринг данных из нескольких запросов AJAX

0

Мне нужно отображать данные из нескольких запросов 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 будет завершен, и действительные данные будут сохранены в некоторой переменной внутри приложения, метод визуализации должен быть снова запущен и отобразить все данные.

Не могли бы вы помочь мне в этом?

Теги:

1 ответ

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

Консоль.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);
  • 0
    К сожалению, это не похоже на работу. Это не выдает ошибку, хотя. Это просто оставляет страницу пустой. И, кстати, вывод из 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: ()
  • 0
    есть ли у вас идеи, почему это так?
Показать ещё 1 комментарий

Ещё вопросы

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