仅在单击按钮时运行 useEffect

Question

我正在制作一个喜欢和不喜欢帖子数据来自后端的帖子的功能

  const blog = {
    likeStatus: false
  }
  const [liked, setLiked] = useState(blog.likeStatus);

  const likeAPI = (status) => {
    console.log(status);
  } 
  useEffect(() => {
    let status = liked ? 'LIKE' : 'DISLIKE';
    likeAPI(status); // API for liking and disliking a post
  }, [liked])
  return (
    <div className="App">
      <button style={{backgroundColor: liked ? 'green' : 'white'}}
        onClick={() => setLiked(!liked)}
      >
        Like
      </button>
    </div>
  );

这是功能的代码

我只想在单击 button 之类时运行 useEffect，但 useEffect 最初也运行并且类似状态发送到后端导致错误数据

有人可以帮我解决这个问题吗？

任何其他逻辑表示赞赏

Answer 1

您无需使用 useEffect 挂钩就可以做到这一点，如下所示：

const blog = {
  likeStatus: false,
};
const [liked, setLiked] = useState(blog.likeStatus);

const likeAPI = (status) => {
  console.log(status);
};

const handleClick = (liked) => {
  setLiked(liked);
  let status = liked ? "LIKE" : "DISLIKE";
  likeAPI(status); // API for liking and disliking a post
};

return (
  <div className="App">
    <button
      style={{ backgroundColor: liked ? "green" : "white" }}
      onClick={() => handleClick(!liked)}
    >
      Like
    </button>
  </div>
);