避免多次使用对组件加载的影响

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 post？

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

Answer 1

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

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