通过rest api更新后，如何切换react钩子中按钮的状态

Question

嘿，伙计们，我是一个刚反应过来并试图成为博客web应用程序前端的人。我可以在主页上显示帖子，并且我可以在没有API调用的情况下使赞按钮工作，只需要管理状态。

现在有了API调用，如果帖子被用户点赞，点赞按钮会显示红色(按钮填充红色(，我可以通过点击它来与之不同，它会更改计数，并与后端的帖子不同，但它不会将按钮状态更改为不同按钮，它会继续取消点赞，而不是切换为点赞按钮状态。

如果用户不喜欢这个帖子，那么按钮就会完全消失，不会显示在屏幕上，所以我无法喜欢这个帖子。

这是我写的代码，我认为这不是写反应代码的好方法，如果有人能帮助解决这个问题，那将是非常有启发性的，因为我还在学习。如果需要，请询问更多信息。

这就是代码。

const [liked, setLiked] = useState(null) 
function setlikeCount(post){
return(
post.like_count = post.like_count + 1
)
}
function setunlikeCount(post){
return(
post.like_count = post.like_count - 1
)
}
function likePosts(post) {
console.log('liked the post')
return(
axiosInstance.post('api/posts/' + post.slug + '/like/')
)
}   
function unlikePosts(post) {
console.log('unliked the post')
return(
axiosInstance.delete('api/posts/' + post.slug + '/like/')
)
}
{myposts.posts && myposts.posts.results.map((post) => {
return (
<h4>{post.title}</h4>
)
}

{post.likes && post.likes.map((lik, index) => {
console.log(user, lik.id)
return (
user === lik.id ? (<FavoriteRoundedIcon style={{ color: "red" }}
key={index}
onClick={ () =>{
unlikePosts(post)
setunlikeCount(post)
setLiked((liked) => liked===false)
}} 
/>)
:   (<FavoriteBorderRoundedIcon key={index}
onClick={ () =>{
likePosts(post)
setlikeCount(post)
setLiked((liked)=> liked===true)
}}
/>)
)
})
}
const [myposts, setPosts] = useState({
posts: null,
})

提取岗位

useEffect(() => {
axiosInstance.get('api/posts/myhome').then((res) => {
const allPosts = res.data;
setLoading(false)
setError("")
setPosts({ posts: allPosts })
// console.log(allPosts.results['0'].likes['0']);

})
.catch(() => {
setLoading(false)
setPosts({})
setError('Something went wrong!')
})
}, [setPosts])

在代码中，user具有用户的id。是否可以像检查python中的条件一样，检查user in lik.id而不是user === lik.id这样的条件？

lik看起来像这个[{id: 1, username: "testuser12"}]

感谢

Answer 1

您需要根据数组的内容显示按钮，如下面的

{post.likes && post.likes.find(x=>x.id===user) ? 
(<FavoriteRoundedIcon style={{ color: "red" }}
key={index}
onClick={ () =>{
unlikePosts(post)
setunlikeCount(post)
setLiked((liked) => liked===false)
}} 
/>)
:   (<FavoriteBorderRoundedIcon key={index}
onClick={ () =>{
likePosts(post)
setlikeCount(post)
setLiked((liked)=> liked===true)
}}
/>)
}

如果数组有值，并且用户是数组的一部分，则显示红色按钮；如果未定义数组或用户不在数组中，则显示另一个按钮。

Answer 2

首先，您的setLiked方法不正确。如果你想将其设置为真/假，只需调用：

setLiked(true)

其次，你应该初始化你喜欢的状态。这意味着你需要使用Effect(当组件加载时(，并从你的API中阅读，如果帖子喜欢或不喜欢。但是初始值最好是false而不是null。