Question

我在React应用程序中遇到一种情况，我希望一部分代码在组件被挂载时只能工作一次，而在其他依赖项发生变化时不能多次工作。我不想在此处编写整个代码，因此出于演示目的，我将向您展示一些示例代码。

 useEffect(() => {
    const fetchFunc = async () => {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/users`
      );
      const resJson = await response.json();
      setUser(resJson[0]);
    };

    fetchFunc();
    if(searchQuery===true){
     //some other work
   }else{
     //some other work
       }

  }, [searchQuery]);

，但是在这种情况下，当searchQuery更改useeffect运行时，提取会再次发生，但是fetchFunc()的useEffect的第一部分再次运行，这是我不希望的。那应该只运行一次。 我正在写一个解决方案。有更好的方法吗？

Answer 1

我对此的解决方案是这样的

useEffect(() => {
    const fetchFunc = async () => {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/users`
      );
      const resJson = await response.json();
      setUser(resJson[0]);
      console.log("fetching runs");
    };

    fetchFunc();
  }, []);

// another useEffect declared

  useEffect(() => {
    if(searchQuery===true){
     //some other work
   }else{
     //some other work
       }
  }, [searchQuery]);

React钩子useEffect用作componentDidMount和componentDidUpdate，其中didmount甚至应调用一次其他依赖项更改

1 个答案: