reactjs - 避免在组件加载时对组件使用多个 useEffect

Question

我在我的 React 应用中构建了一个简单的点赞、书签功能。

const [liked, setLiked] = useState();
const [bookmarked, setBookmarked] = useState();

  useEffect(() => {
    post.liked ?  setLiked(true):  setLiked(false);
    post.bookmarked ?  setBookmarked(true) : setBookmarked(false);
  }, []);

  useEffect(() => {
    axios.post(`${baseURL}/content/like`).then((res) => console.log(res));
  }, [liked]);

每当组件加载时，useEffect 都会运行两次

如何避免初始 axios post 和 axios 仅在状态发生变化时才发布？

每当 liked 状态改变时，我想发送一个 post 请求。

Answer 1

您无法避免多次执行 useEffect Hook 。每次 liked 值更改时都会调用该函数，但是，您可以在调用 axios.post 之前检查 liked 值以防止创建请求喜欢状态的初始化状态:

const [liked, setLiked] = state(false);
...
useEffect(() => {
  if (liked) {
    axios.post(`${baseURL}/content/like`).then(res => console.log(res));
  }
}, [liked]);