在 React 中使用以下组件时出现问题，用户被添加到导航栏，就好像它是我一样

如何解决在 React 中使用以下组件时出现问题，用户被添加到导航栏，就好像它是我一样

好吧，这很难解释，但我有一个不知道如何修复的错误。我有一个 Follow 组件，我在其中调用后端以将用户添加为关注者/关注者。该函数本身可以工作，但是当我更改 dynamicUser 的状态时，该用户会被添加到我的导航栏中，我可以访问配置文件。我正在分享我的整个代码，所以也许你们中的任何人都可以指出我出了什么问题。提前致谢！

关注组件

const Follow = ({ userId,user,setUser }) => {
  const [error,setError] = useState(null);
  const [follow,setFollow] = useState([]);
  const classes = useStyles();

  const handleFollow = (e) => {
    e.preventDefault();
    const accesstoken = localStorage.getItem(CONST.ACCESS_TOKEN);
    axios
      .put(
        `${CONST.SERVER_URL}${PATHS.USER}/${userId}${PATHS.FOLLOW_USER}`,{ user },{ headers: { authorization: accesstoken } }
      )
      .then((response) => {
        console.log("BASH",response);
        setError(null);
        if (!response.status) {
          return setError(response);
        }

        setUser(response?.data);
      })
      .catch((error) => {
        console.log("ERROR",error);
      });
  };

  const handleUnFollow = (e) => {
    e.preventDefault();
    const accesstoken = localStorage.getItem(CONST.ACCESS_TOKEN);
    axios
      .put(
        `${CONST.SERVER_URL}${PATHS.USER}/${userId}${PATHS.UNFOLLOW_USER}`,{ headers: { authorization: accesstoken } }
      )
      .then((response) => {
        console.log("Are you?",response);
        setError(null);
        if (!response.status) {
          return setError(response);
        }
        setUser(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <div>
      {user.following[0] === userId ? (
        <form onSubmit={handleUnFollow}>
          <Button
            className={classes.unFollow}
            variant="contained"
            color="secondary"
            type="submit"
            startIcon={<PersonAdddisabledIcon />}
          >
            UnFollow
          </Button>
        </form>
      ) : (
        <form onSubmit={handleFollow}>
          <Button
            className={classes.follow}
            variant="contained"
            color="primary"
            type="submit"
            startIcon={<PersonAddIcon />}
          >
            Follow
          </Button>
        </form>
      )}
    </div>
  );
};

父组件

const SingleUser = (props) => {
  const { user,setUser } = props;
  const [dynamicUser,setDynamicUser] = useState({});
  const [isLoading,setIsLoading] = useState(true);
  const classes = useStyles();

  useEffect(() => {
    setIsLoading(true);
    axios
      .get(`${CONST.SERVER_URL}/users/${props.match.params.userId}`,{
        headers: { authorization: localStorage.getItem(CONST.ACCESS_TOKEN) },})
      .then((response) => {
        setDynamicUser(response.data);
      })
      .catch((err) => {
        console.log(err.response);
      })
      .finally(() => {
        setIsLoading(false);
      });
  },[props.match.params.userId]);

  if (isLoading) {
    return <LoadingComponent />;
  }
  console.log("DYNAMIC",dynamicUser);
  return (
    <div>
    
        <Grid className={classes.button} raise elevation={3}>
          <Follow userId={dynamicUser._id} user={user} setUser={setUser} />
        </Grid>
)
}

解决方法

这可能会解决问题，或者从错误消息中更清楚地说明问题

// ...

const Follow = ({ userId,user,setUser }) => {
  const [error,setError] = useState(null);
  const [follow,setFollow] = useState([]);
  const classes = useStyles();

  const handleFollow = () => {
    return new Promise(async (resolve,reject) => {
      try {
        const accessToken = localStorage.getItem(CONST.ACCESS_TOKEN);
        const url = `${CONST.SERVER_URL}${PATHS.USER}/${userId}${PATHS.FOLLOW_USER}`
        const response = await axios.put(url,{ user },{ headers: { authorization: accessToken } })
        console.log("BASH",response);
        setError(null);
        if (!response.status) throw response

        setUser(response.data);
        resolve()
      } catch (err) {
        setError(err.response.data)
        console.log("ERROR",err);
        reject(err)
      }
    })
  };

  // try catch blocks are easier to troubleshoot with promises
  const handleUnFollow = () => {
    return new Promise(async (resolve,reject) => {
      try {
        const accessToken = localStorage.getItem(CONST.ACCESS_TOKEN);
        const url = `${CONST.SERVER_URL}${PATHS.USER}/${userId}${PATHS.UNFOLLOW_USER}`
        const response = await axios.put(url,{ headers: { authorization: accessToken } })
        console.log("Are you?",response);
        if (!response.status) throw response
        
        setError(null);
        setUser(response.data);
        resolve();
      } catch (err) {
        console.error(err);
        setError(err.response.data);
        reject(err);
      }
    })
  };

  // i made some purely syntactical changes - i've always felt this was
  // more readable in my own code to wite them out this way
  const hasUserId = user.following[0] === userId
  return (
    <div>
      <form
        onSubmit={async e => {
          e.preventDefault();
          if (hasUserId) {
            await handleUnFollow()
          } else {
            await handleFollow()
          }
        }}
      >
        <Button
          className={hasUserId ? classes.unFollow : classes.follow}
          variant="contained"
          color={hasUserId ? 'secondary' : 'primary'}
          type="submit"
          startIcon={hasUserId ? <PersonAddDisabledIcon /> : <PersonAddIcon />}
        >
          {hasUserId ? 'UnFollow' : 'Follow' }
        </Button>
      </form>
    </div>
  );
};

const SingleUser = (props) => {
  const { user,setUser } = props;
  const [dynamicUser,setDynamicUser] = useState({});
  const [isLoading,setIsLoading] = useState(true);
  const classes = useStyles();

  useEffect(() => {
    return new Promise(async (resolve,reject) => {
      try {
        setIsLoading(true);
        const url = `${CONST.SERVER_URL}/users/${props.match.params.userId}`
        const headers = { authorization: localStorage.getItem(CONST.ACCESS_TOKEN) }
        const response = await axios.get(url,{ headers })
        setDynamicUser(response.data);
        setIsLoading(false);
        resolve()
      } catch (err) {
        console.log(err.response.data);
        reject(err)
      }
    })
    // im not sure what this part does,since useEffect is never called
    // however using promises is much easier to troubleshoot bugged out code
  },[props.match.params.userId]); 

  if (isLoading) {
    return <LoadingComponent />;
  }
  console.log("DYNAMIC",dynamicUser);

  return (
    <div>
      <Grid className={classes.button} raise elevation={3}>
        <Follow userId={dynamicUser._id} user={user} setUser={setUser} />
      </Grid>
    </div>
  )
}

,

所以我最终解决了这个问题，问题实际上出在后端，因为我发送了错误的用户，但现在一切正常。我仍然会把我的代码放在这里，因为 unFollow 似乎有问题。

//follow user
router.put("/:userId/follow",isLoggedIn,async (req,res) => {
  try {
    const user = await User.findById(req.params.userId);

    const currentUser = await User.findById(req.body.user._id);

    const follow = await User.findByIdAndUpdate(
      currentUser,{ $addToSet: { following: user } },{ new: true }
    );
    await User.findByIdAndUpdate(user,{
      $addToSet: { followers: currentUser },});

    return res.json(follow);
  } catch (err) {
    return res.status(500).json({ error: err });
  }
});

//unFollow the user
router.put("/:userId/unFollow",{ $pull: { following: user } },{
      $pull: { followers: currentUser },});

    return res.json(follow);
  } catch (err) {
    return res.status(500).json({ error: err });
  }
});