React 组件不会在状态更改时重新渲染

Question

我的 Profile.js 功能组件中有这个状态：

  const [isFollowing, setIsFollowing] = useState(
    user?.followings.includes(proUser?._id)
  );

基于状态的条件渲染：

return (
...
 <button onClick={followUser}>
   {isFollowing ? "Unfollow" : "Follow"}
  </button>
...

我 100% 确定 < strong>user?.followings.includes(proUser?._id) 是 true 但按钮仍然显示“follow”，所以我控制台记录它以查看发生了什么：

 console.log(user?.followings.includes(proUser?._id);

该组件将重新-渲染3第一次打印false，第二次可能是false或true，第三次总是打印true，但状态仍然为 false，组件不会在状态更改时重新渲染，甚至状态也不会更改，为什么会发生这种情况以及如何修复它？

followUser 函数，如果您想看一下：

  const followUser = async () => {
    if (isFollowing) {
      await fetch(`http://localhost:8000/unfollow-user/${id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          userId: user?._id,
        }),
      });
      dispatch({ type: "UNFOLLOW", payload: id });
    } else {
      await fetch(`http://localhost:8000/follow-user/${id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          userId: user?._id,
        }),
      });
      dispatch({ type: "FOLLOW", payload: id });
    }

    setIsFollowing(!isFollowing);
  };

Answer 1

后续渲染将忽略初始状态。您必须使用 setIsFollowing(user?.followings.includes(proUser?._id)) 来代替。

将其放入 useEffect 中即可运行。