React 从组件中的 axios 获取响应

Question

I have a component which is looping through a list of posts and making a get request for each to see if the current user liked this post. I'm returning the data but the problem is I can't seem to wait for the response from the request before rendering content in renderContent(). I'm getting an error "await is a reserved keyword". How should I be writing this? Thanks for your help!

import React, {Component} from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../../actions';
import axios from 'axios';

class PostsSection extends Component {

  constructor(props){
    super(props);

    this.heartClick = this.heartClick.bind(this);
  }

  componentDidMount() {
    this.props.fetchPosts();
  }

  heartClick(postId){
    const userId = this.props.auth._id;
    const values = {postId, userId};
    this.props.likePost(values);
  }

  didLikePost(userId, postId){
    let didLike = false;
    try {
      const res = axios.get("/api/did_user_like", {
        params: {
          postId: postId,
          userId: userId
        }
      })
      .then(function(result){
        console.log(result.data);
        if(result.data == null){
          didLike = false;
        } else {
          didLike = true;
        }
      });
    } catch(err){
    }
    return didLike;
  }

  async renderContent(){

    if(this.props.posts){
      return this.props.posts.map(entry => {
        let ftImgUrl = 'https:' + entry.fields.featuredImage.fields.file.url;
        let postId = entry.sys.id;
        let title = entry.fields.title;
        let authorName = entry.fields.authorName;
        const userId = this.props.auth._id;

        let didLike = await this.didLikePost(userId, postId);
        let heartActive = didLike ? "active" : "";
        return (
          <div className="w-col w-col-4 post-container" key={postId}>
            <div className="img-container"></div>
            <img src={ftImgUrl} className="featured-ad thumb" />
            <div className="extras">
              <div className="left">
                <a>{ authorName }</a>
              </div>
              <div className="right">
                <div className={"heart " + heartActive} onClick={() => this.heartClick(postId)}></div>
              </div>
            </div>
          </div>
        )
      });
    }
  }

  render(){
    const {posts} = this.props;
    return (
      <div className="section">
        <div className="w-container">
          <div className="category-row w-row">
            { this.renderContent() }
          </div>
        </div>
      </div>
    )
  }
}


function mapStateToProps(state){
  return {
   auth: state.auth,
   posts: state.posts
  };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(actions, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(PostsSection);

Answer 1

Your issue is in this function.

async renderContent(){

    if(this.props.posts){
      return this.props.posts.map(entry => {
        let ftImgUrl = 'https:' + entry.fields.featuredImage.fields.file.url;
        let postId = entry.sys.id;
        let title = entry.fields.title;
        let authorName = entry.fields.authorName;
        const userId = this.props.auth._id;

        let didLike = await this.didLikePost(userId, postId);
        let heartActive = didLike ? "active" : "";
        return (
          <div className="w-col w-col-4 post-container" key={postId}>
            <div className="img-container"></div>
            <img src={ftImgUrl} className="featured-ad thumb" />
            <div className="extras">
              <div className="left">
                <a>{ authorName }</a>
              </div>
              <div className="right">
                <div className={"heart " + heartActive} onClick={() => this.heartClick(postId)}></div>
              </div>
            </div>
          </div>
        )
      });
    }
  }

When you want to use await the function using it must be marked with async . Now even though you have async before your renderContent method, you are actually using await in the callback of map . What you need to is mark your map callback with async as well.

It would look like this.

async renderContent(){

    if(this.props.posts){
      return this.props.posts.map(async entry => {
        let ftImgUrl = 'https:' + entry.fields.featuredImage.fields.file.url;
        let postId = entry.sys.id;
        let title = entry.fields.title;
        let authorName = entry.fields.authorName;
        const userId = this.props.auth._id;

        let didLike = await this.didLikePost(userId, postId);
        let heartActive = didLike ? "active" : "";
        return (
          <div className="w-col w-col-4 post-container" key={postId}>
            <div className="img-container"></div>
            <img src={ftImgUrl} className="featured-ad thumb" />
            <div className="extras">
              <div className="left">
                <a>{ authorName }</a>
              </div>
              <div className="right">
                <div className={"heart " + heartActive} onClick={() => this.heartClick(postId)}></div>
              </div>
            </div>
          </div>
        )
      });
    }
  }