React 从组件中的 axios 获取响应

Question

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

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

您的问题出在此功能中。

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

当你想使用await ，使用它的函数必须用async标记。 现在，即使您在renderContent方法之前有async ，您实际上是在map的回调中使用await 。 您需要使用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>
        )
      });
    }
  }