英文:
React updating Like counter when user clicks like button without refreshing page
问题
Sure, here is the translated code:
// 这是我的父组件，用于渲染我的“喜欢组件”。父组件有一个名为“Likes”的状态，用于存储所有的“喜欢”。从“喜欢”组件调用“handleLike”函数。“likeFood(foodId, UserId)”是我的 API 调用，用于为特定帖子创建新的喜欢，我将其保存在一个单独的文件中。
// 这是我的 API
export default function likeFood(foodId, UserId) {
Axios.post(`${process.env.REACT_APP_APIENDPOINT}/Likes/like`, {
foodId: foodId,
UserId: UserId,
}).catch(function (error) {
console.log(error);
});
}
// 这个“handleLike”函数从子“喜欢”组件调用，还应该处理更新状态。
handleLike = async (foodId, UserId) => {
const oldLikes = this.state.Likes;
const newLikes = oldLikes.filter((like) => like.foodId === foodId);
likeFood(foodId, UserId);
this.setState({ Likes: newLikes });
};
// 请注意，如果我将“const newLikes = oldLikes.filter((like) => like.foodId === foodId);”更改为
// “const newLikes = oldLikes.filter((like) => like.foodId !== foodId);”，
// 在不喜欢时状态更新正常，但喜欢时不正常。
// 在这里，我渲染了我的“喜欢”组件
<Like
foodId={food.id}
UserId={id}
Likes={this.state.Likes}
handleLike={this.handleLike}
/>;
// 这是我的“喜欢”组件
function Like({ foodId, UserId, Likes, handleLike }) {
// 这个函数计算每个特定帖子的喜欢数量
function likeAmount(foodId) {
const likes = Likes.filter((like) => like.foodId === foodId);
return likes.length;
}
return (
<div className="like-button">
<BsHeart
className="like"
size={24}
onClick={() => handleLike(foodId, UserId)}
/>
<p>{likeAmount(foodId)}</p>
</div>
);
}
export default Like;
Please note that I've only translated the code and left out the comments and explanations. If you have any specific questions or need further assistance, please feel free to ask.
英文:
> This is my parent component that renders my Like Component. The parent component has a state called Likes that stores all the Likes. The handleLike function gets called from the Like component. likeFood(foodId, UserId) is my api call that creates a new like for specific post that i have in a separate file.
// this is my api
export default function likeFood(foodId, UserId) {
Axios.post(`${process.env.REACT_APP_APIENDPOINT}/Likes/like`, {
foodId: foodId,
UserId: UserId,
}).catch(function (error) {
console.log(error);
});
}
// this handleLike function gets called from the child Like component and should also handle updating the state.
handleLike = async (foodId, UserId) => {
const oldLikes = this.state.Likes;
const newLikes = oldLikes.filter((like) => like.foodId === foodId);
likeFood(foodId, UserId);
this.setState({ Likes: newLikes });
};
>Note if i change const newLikes = oldLikes.filter((like) => like.foodId === foodId);
to
>const newLikes = oldLikes.filter((like) => like.foodId !== foodId);
the state updates properly when disliking but not when liking.
// here i render my Like component
<Like
foodId={food.id}
UserId={id}
Likes={this.state.Likes}
handleLike={this.handleLike}
/>
> This is my Like component
function Like({ foodId, UserId, Likes, handleLike }) {
// this function calculates the amount of likes for each specific post
function likeAmount(foodId) {
const likes = Likes.filter((like) => like.foodId === foodId);
return likes.length;
}
return (
<div className="like-button">
<BsHeart
className="like"
size={24}
onClick={() => handleLike(foodId, UserId)}
/>
<p>{likeAmount(foodId)}</p>
</div>
);
}
export default Like;
答案1
得分: 1
你需要改变喜欢的方法。
handleLike = async (foodId, UserId) => {
const oldLikes = this.state.Likes;
const newLikes = [...oldLikes, {foodId: foodId}]; // 定义你的对象
likeFood(foodId, UserId);
this.setState({ Likes: newLikes });
};
英文:
You need to change liking method.
handleLike = async (foodId, UserId) => {
const oldLikes = this.state.Likes;
const newLikes = [...oldLikes, {foodId: foodId}]; // Define your object
likeFood(foodId, UserId);
this.setState({ Likes: newLikes });
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论