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);
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>
)
});
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.