Блог

Я пытаюсь создать функциональные возможности для пользователей и подписчиков, используя контекст реакции. Если зарегистрированный пользователь просматривает свой собственный профиль, он может увидеть кнопку редактирования / удаления. Когда он нажимает на профиль других, нажмите кнопку «Подписаться» / «Отменить подписку». Проблема в том, что когда я нажимаю на кнопку «Следовать», кнопка «Следовать» заменяется кнопками «Редактировать» и «удалить» вместо кнопки «Отменить подписку», однако, если я обновлю страницу на этом этапе, она правильно отобразит отмену подписки.

контекстный файл:

 const initialState = {
  loggedInUser: null,
};

// Add following / follower
  const follow = async (userId, followId) => {
    try {
      const res = await axios.put(
        "/api/users/follow",
        { userId, followId },
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
        }
      );
      dispatch({ type: "FOLLOW", payload: res.data });
    } catch (err) {
      console.log(err);
    }
  };

  // Remove following / follower
  const unfollow = async (userId, unfollowId) => {
    try {
      const res = await axios.put(
        "/api/users/unfollow",
        { userId, unfollowId },
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${localStorage.getItem("token")}`,
          },
        }
      );      
      dispatch({ type: "UNFOLLOW", payload: res.data });
    } catch (err) {
      console.log(err);
    }
  };
  

редуктор:

  case "FOLLOW":
      return {
        ...state,
        loggedInUser: action.payload,
      };
    case "UNFOLLOW":
      return {
        ...state,
        loggedInUser: action.payload,
  

Профиль

 // user = profile currently being viewed and it is working fine
{loggedInUser amp;amp; loggedInUser._id === user._id ? (
                <>
                  <Link to={`/user/edit/${user._id}`} className={classes.link}>
                    <IconButton color="primary">
                      <Edit />
                    </IconButton>
                  </Link>

                  <IconButton onClick={() => handleDelete()}>
                    <Delete color="error" />
                  </IconButton>
                </>
              ) : loggedInUser.following.includes(user._id) ? (
                <Button onClick={() => unfollow(loggedInUser._id, user._id)}>
                  UNFOLLOW
                </Button>
              ) : (
                <Button onClick={() => follow(loggedInUser._id, user._id)}>
                  FOLLOW
                </Button>
              )}
  

Что я здесь делаю не так?

РЕДАКТИРОВАТЬ заменено

 loggedInUser.following.includes(user._id) ? (
                <Button onClick={() => unfollow(loggedInUser._id, user._id)}>
  

с

 user.followers.some(follower => follower._id === loggedInUser._id) ? (
                <Button onClick={() => unfollow(loggedInUser._id, user._id)}>
                  UNFOLLOW
                </Button>
  

и теперь, когда я нажимаю на кнопки «Подписаться» / «Отменить подписку», «Редактировать» и «удалить» не отображаются, однако мне все равно нужно обновить страницу, чтобы увидеть обновленный пользовательский интерфейс.