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

Question

Мне нужно позвонить и установить объект, прежде чем отправить его ребенку. Тем не менее, когда я отправляю, как 3 свойства, которые я создал (фото, альбомы, сообщения) не определены в сыне. Что я делаю не так?

buildUser: () => {
  return new Promise( (resolve, reject) =>{
      let response = [];

      fetch(`${endPoint}users`)
          .then(res => res.json())
          .then( users => {

              users.forEach(user => {
                  user.city = user.address.city;

                  Promise.all([
                      ApiService.getUserPhoto(user.id),
                      ApiService.getUserPost(user.id),
                      ApiService.getUserAlbum(user.id)
                  ]).then( data => {
                      user['photos'] = data[0].length.toString();
                      user['posts'] = data[1].length.toString();
                      user['albums'] = data[2].length.toString();
                  });

                  response.push(user);
                })

                resolve(response);   
          })
          .catch(err => {
            console.log(err);
            reject(err);
        })
  })

}

asyn c componentDidMount () {

const users = await ApiService.buildUser()
this.setState({ users })

}

render () {return (

  <Fragment>
    <Header />
    <Breadcrumb />
    { this.state && this.state.users &&
    <User data={ this.state.users }/> }
    <Register />
  </Fragment>
);

}

buildLine () {

    this.props.data.forEach(data => {
        console.log('data.posts', data.posts) // is undefined
        let line = {};
            this.props.columns.map(columns => {
                return line[columns.toLowerCase()] = data[columns.toLowerCase()];
            });

        this.lines.push(line);
    });
}

...

Answer 1

Я изменил часть кода, похоже, вы не правильно выполняете обещания:

const users = () => Promise.resolve([{ id: 1 }, { id: 2 }]);
const ApiService = {
  getUserPhoto(id) {
    return [1];
  },
  getUserPost(id) {
    return [1, 2];
  },
  getUserAlbum(id) {
    return [1, 2, 3];
  },
};
class App extends React.Component {
  state = { users: [] };
  buildUser = () => {
    return users()
      .then(users =>
        Promise.all(
          users.map(user =>
            Promise.all([
              user,
              ApiService.getUserPhoto(user.id),
              ApiService.getUserPost(user.id),
              ApiService.getUserAlbum(user.id),
            ]).then(([user, photos, posts, albums]) => {
              // user.city = user.address.city;
              user['photos'] = photos.length.toString();
              user['posts'] = posts.length.toString();
              user['albums'] = albums.length.toString();
              return user;
            })
          )
        )
      )
      .catch(err => {
        console.log(err);
      });
  };
  componentDidMount() {
    this.buildUser().then(users =>
      this.setState({ users })
    );
  }
  render() {
    return (
      
        {JSON.stringify(this.state.users, undefined, 2)}
      

); }} ReactDOM.render ( , document.getElementById ('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>