Javascript 从组件中的axios获取响应

我有一个组件，它在一个帖子列表中循环，并为每个帖子发出get请求，以查看当前用户是否喜欢这个帖子。我正在返回数据，但问题是在renderContent（）中呈现内容之前，我似乎无法等待请求的响应。我收到一个错误“wait是一个保留关键字”。我该怎么写呢？谢谢你的帮助

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

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
将*作为操作从“../../actions”导入；
从“axios”导入axios；
类PostsSection扩展组件{
建造师（道具）{
超级（道具）；
this.heartClick=this.heartClick.bind（this）；
}
componentDidMount（）{
this.props.fetchPosts（）；
}
点击鼠标右键（postId）{
const userId=this.props.auth.\u id；
常量值={postId，userId}；
this.props.likePost（值）；
}
didLikePost（用户ID，postId）{
让didLike=虚假；
试一试{
const res=axios.get（“/api/did\u user\u like”{
参数：{
posted:posted，
userId:userId
}
})
.然后（函数（结果）{
console.log（result.data）；
如果（result.data==null）{
didLike=假；
}否则{
didLike=真；
}
});
}捕捉（错误）{
}
返回didLike；
}
异步renderContent（）{
如果（这个.道具.帖子）{
返回此.props.posts.map（条目=>{
让ftImgUrl='https:'+entry.fields.featuredImage.fields.file.url；
设postId=entry.sys.id；
让title=entry.fields.title；
让authorName=entry.fields.authorName；
const userId=this.props.auth.\u id；
让didLike=等待这个消息；
让heartActive=Didike？“active”：“；
返回(
{authorName}
这个。点击鼠标右键（postId）}>
)
});
}
}
render（）{
const{posts}=this.props；
返回(
{this.renderContent（）}
)
}
}
函数MapStateTops（状态）{
返回{
auth:state.auth，
职位：state.posts
};
}
功能图DispatchToprops（调度）{
返回bindActionCreators（操作、分派）；
};
导出默认连接（mapStateToProps、mapDispatchToProps）（PostsSection）；

您的问题在于此功能

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

---

谢谢你解决了这个问题！但是现在出现了一个错误，说“对象作为React子对象无效”。这只发生在我像您所说的那样在映射中使用async时。知道问题可能是什么吗？通常这意味着您试图呈现的数据是一个对象，而不是预期的字符串。更重要的是，如果不能运行代码，我真的不能说。我将记录您尝试渲染的值，并找到仍然是对象的值

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