React Follow 功能在页面加载时激活

Question

我正在尝试在 React rails-api 网络应用程序中实现 follow/unfollow 函数。目前，当我点击 follow/unfollow 按钮时，关注和取消关注 post/delete 就好了。

但是，每当用户访问另一个用户的页面时，它会在页面加载时 follow/unfollow 而无需单击 follow/unfollow 按钮。我不明白为什么会这样，因为我 post/delete 的 useEffect 第二个参数设置为在 follow/unfollow 的状态发生变化时关闭。

请帮我弄清楚为什么会发生这种情况以及如何防止这种情况发生。如果需要更多信息，请告诉我。

import React, {useState, useEffect} from 'react'
import {Link, useParams} from 'react-router-dom'
import decode from 'jwt-decode'
function NotUserPage() {
    const {id} = useParams()
    const [user, setUser] = useState({})
    const loggedUser = decode(localStorage.getItem("token"))
    const username = loggedUser.username
    const userId = loggedUser.user_id 
    const [followUnFollow, setFollowUnFollow] = useState("true")
   
  
    const toggleFollowUnFollow = () => {
        setFollowUnFollow(!followUnFollow)
    }
    

    const fetchUserData = () => {
        fetch(`http://localhost:3000/users/${id}`)
            .then(res => res.json())
            .then(data => setUser(data))
    }

    useEffect(() => {
        fetchUserData()
    }, [])


    const unFollow = () => {
        fetch(`http://localhost:3000/users/${id}/unfollow`, {
            method: "POST",
            body:  JSON.stringify({
                follower_id: userId,
                followee_id: id
            }),
            headers: {
                "Content-type": "application/json",
                "Authorization": `bearer ${localStorage.getItem("token")}`,
              },
            
            })
            .then(res => res.json())
            .then(data => console.log(data))
                
    }
  
    useEffect(() => {
        unFollow()
    }, [followUnFollow])
   

 


    const handleFollow = () => {
        fetch(`http://localhost:3000/users/${id}/follow`, {
            method: "POST",
            body:  JSON.stringify({
                follower_id: userId,
                followee_id: id
            }),
            headers: {
                "Content-type": "application/json",
                "Authorization": `bearer ${localStorage.getItem("token")}`,
              },
            
            })
            .then(res => res.json())
            .then(data => console.log(data))
                
    }
    useEffect(() => {
        handleFollow()
    }, [followUnFollow])
  
    const fButton = () => {
       
        toggleFollowUnFollow() ? handleFollow() : unFollow()

    }

    return (
        <div>
           {user.username} 
           <button onClick={fButton}>follow</button>
        </div>
    )
}

export default NotUserPage

Answer 1

import React, {useState, useEffect} from 'react'
import {Link, useParams} from 'react-router-dom'
import decode from 'jwt-decode'
function NotUserPage() {
    const {id} = useParams()
    const [user, setUser] = useState({})
    const loggedUser = decode(localStorage.getItem("token"))
    const username = loggedUser.username
    const userId = loggedUser.user_id 
    const [following, setFollowing] = useState(false)
  
    const fetchUserData = () => {
        fetch(`http://localhost:3000/users/${id}`)
            .then(res => res.json())
            .then(data => setUser(data))
    }

    useEffect(() => {
        fetchUserData()
    }, [])

    const unFollow = () => {
        fetch(`http://localhost:3000/users/${id}/unfollow`, {
            method: "POST",
            body:  JSON.stringify({
                follower_id: userId,
                followee_id: id
            }),
            headers: {
                "Content-type": "application/json",
                "Authorization": `bearer ${localStorage.getItem("token")}`,
              },
            
            })
            .then(res => res.json())
            .then(data => console.log(data))
            .then(() => setFollowing(false))
                
    }
 
    const handleFollow = () => {
        fetch(`http://localhost:3000/users/${id}/follow`, {
            method: "POST",
            body:  JSON.stringify({
                follower_id: userId,
                followee_id: id
            }),
            headers: {
                "Content-type": "application/json",
                "Authorization": `bearer ${localStorage.getItem("token")}`,
              },
            
            })
            .then(res => res.json())
            .then(data => console.log(data))
            .then(() => setFollowing(true))
                
    }
  
    const fButton = () => following ? unFollow() : handleFollow();


    return (
        <div>
           {user.username} 
           <button onClick={fButton}>follow</button>
        </div>
    )
}

export default NotUserPage

React Follow 功能在页面加载时激活

React Follow Function activates on page load

reactjs

rails-api