Question

大家好，我是新手，我想做出一个博客Web应用程序的前端。我可以在首页上显示帖子，并且可以在不使用API调用的情况下使like按钮正常工作，而只需要管理状态即可。

现在通过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方法不正确。如果要将其设置为true / false，只需调用：

setLiked(true)

第二，您应该初始化自己喜欢的状态。这意味着您需要使用Effect（在加载组件时）并从API中读取（无论是否喜欢）。但是初始值最好是false而不是null。

通过rest api更新按钮后，如何在react挂钩中切换按钮状态？

2 个答案: