按钮不会根据api调用在react js中改变状态

Question

我有一个显示单个帖子的页面，我有一个喜欢按钮。如果帖子被点赞，当用户单击按钮时，它会将其状态更改为“不喜欢”按钮，但如果帖子不被点赞，则会注册“赞”并将 id 推送到数组中，但按钮状态没有更新，我必须重新加载页面才能看到该页面。有人可以告诉我如何解决这个问题吗？这是代码：    const [liked, setLiked] = useState(false)    const [data, setData] = useState([]);    function likePosts(post, user) {        post.likes.push({ id: user });        setData(post);        axiosInstance.post('api/posts/' + post.slug + '/like/');        window.location.reload()    }    function unlikePosts(post, user) {        console.log('unliked the post');        data.likes = data.likes.filter(x => x.id !== user);        setData(data);        return (            axiosInstance.delete('api/posts/' + post.slug + '/like/')        )    }对于按钮：{data.likes && data.likes.find(x => x.id === user) ?        (<FavoriteRoundedIcon style={{ color: "red" }}            onClick={() => {                unlikePosts(data, user)                setLiked(() => liked === false)            }           }        />)        : (<FavoriteBorderRoundedIcon               onClick={() => {               likePosts(data, user)               setLiked(() => liked === true)               }        }        />)    }谢谢，请询问是否需要更多详细信息。

Answer 1

您的主要问题是您直接改变状态而不是调用函数setState。

为了清楚起见，我重命名data为post，因为您已经说过这是一个代表一篇文章数据的对象。

const [post, setPost] = useState(initialPost);

您不需要使用likedas 状态，因为我们已经可以post通过查看我们的用户是否在post.likes数组中来从数据中访问此信息。这使我们拥有“单一的事实来源”，我们只需要在一个地方进行更新。

const isLiked = post.likes.some((like) => like.id === user.id);

我对likes数组感到困惑。它看起来像是一组对象，它们只是{id: number}，在这种情况下，您应该只拥有一组喜欢该帖子的用户的 ID。但也许对象中还有其他属性（如用户名或时间戳）。

在为像博客文章这样的复杂事物设计组件时，您希望分解出可以在应用程序的其他地方使用的小块。我们可以定义一个LikeButton显示我们内心的。这是一个不处理任何逻辑的“演示”组件。它只需要知道是否发帖isLiked以及要做什么onClick。

export const LikeButton = ({ isLiked, onClick }) => {

  const Icon = isLiked ? FavoriteRoundedIcon: FavoriteBorderRoundedIcon;

  return (

    <Icon

      style={{ color: isLiked ? "red" : "gray" }}

      onClick={onClick}

    />

  );

};

我们关于喜欢和不喜欢的很多逻辑可能会被分解成某种usePostLike钩子，但我还没有完全优化它，因为我不知道你的 API 在做什么以及我们应该如何响应我们得到的响应.

当用户单击赞按钮时，我们希望更改立即反映在 UI 中，因此我们调用setPost并从数组中添加或删除当前用户likes。我们必须用一个新对象设置状态，所以我们复制所有不随展开运算符改变的帖子属性...post，然后likes用编辑过的版本覆盖该属性。 filter()并且concat()都是返回数组新副本的安全数组函数。

我们还需要调用 API 来发布更改。您在“喜欢”和“不同”场景中使用相同的 url，因此我们可以调用广义函数并将方法名称或作为参数传递给对象，而不是调用axios.postand 。我们可能可以以类似的方式组合我们的两个调用，并将and更改为一个函数。但就目前而言，这就是我所拥有的：axios.deleteaxios.request'post''delete'configsetPostlikePost()unlikePost()toggleLikePost()

export const Post = ({ initialPost, user }) => {

  const [post, setPost] = useState(initialPost);

  const isLiked = post.likes.some((like) => like.id === user.id);

  function likePost() {

    console.log("liked the post");

    // immediately update local state to reflect changes

    setPost({

      ...post,

      likes: post.likes.concat({ id: user.id })

    });

    // push changes to API

    apiUpdateLike("post");

  }

  function unlikePost() {

    console.log("unliked the post");

    // immediately update local state to reflect changes

    setPost({

      ...post,

      likes: post.likes.filter((like) => like.id !== user.id)

    });

    // push changes to API

    apiUpdateLike("delete");

  }

  // generalize like and unlike actions by passing method name 'post' or 'delete'

  async function apiUpdateLike(method) {

    try {

      // send request to API

      await axiosInstance.request("api/posts/" + post.slug + "/like/", { method });

      // handle API response somehow, but not with window.location.reload()

    } catch (e) {

      console.log(e);

    }

  }

  function onClickLike() {

    if (isLiked) {

      unlikePost();

    } else {

      likePost();

    }

  }

  return (

    <div>

      <h2>{post.title}</h2>

      <div>{post.likes.length} Likes</div>

      <LikeButton onClick={onClickLike} isLiked={isLiked} />

    </div>

  );

};