渲染来自多个ajax请求的数据

Question

I need to make a call and set an object before sending it to the child. However, when I send, as 3 properties that I created (photo, albums, posts) are undefined in the son. What am I doing wrong?

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);
        })
  })

}

async 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

I changed some of the code, looks like you're not handling the promises correctly:

 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 ( <pre> {JSON.stringify(this.state.users, undefined, 2)} </pre> ); } } ReactDOM.render(<App />, 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>