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

问题描述

我正在尝试在react rails-api Web应用程序中实现关注/取消关注功能。目前，当我单击“关注/取消关注”按钮时，关注和取消关注发布/删除就可以了。

但是，每当一个用户访问另一个用户页面时，它将在页面加载时跟随/取消跟随，而无需单击“跟随/取消跟随”按钮。我不明白为什么会这样，因为对于我的发布/删除操作，当我关注/取消关注的状态更改时，useEffect第二个参数设置为关闭。

请帮助我弄清楚为什么会这样以及如何防止这种情况。让我知道是否需要更多信息。

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`,})
            .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

解决方法

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`,})
            .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