useEffect中的Return语句

Question

我正在尝试通过一些 API 获取数据并映射到我的产品页面。问题是当我在

useEffect

中编写 return 语句时，输出没有显示在我的控制台中，但是当我注释掉 return 语句时，我会在控制台中获取数据。这是为什么？

 const [data, setData] = useState([]);
 const [filter, setFilter] = useState(data);
 const [loading, setLoading] = useState(false);
 let componentMounted = true;

 useEffect(() => {
    const getProducts = async () => {
      setLoading(true);
      const response = await fetch("any_url");
      if (componentMounted) {
        setData(await response.clone().json());
        setFilter(await response.json());
        setLoading(false);
        console.log(filter)
      }
    };
    // return () => {
    //   componentMounted = false;
    // }

    getProducts();
  },[]);

Answer 1

return

语句将直接结束函数并返回一个值。 当您在

return

钩子中取消注释

useEffect

语句时，

return

语句之后的代码将无法访问。这意味着您的

getProducts()

调用永远不会发生，并且您将不会看到预期的

console.log()

输出。 您应该将

return

语句放在最后一行的

useEffect

挂钩中，以便在函数返回值之前执行

getProducts()

调用。

解决方案：

 useEffect(() => {
    const getProducts = async () => {
      setLoading(true);
      const response = await fetch("any_url");
      if (componentMounted) {
        setData(await response.clone().json());
        setFilter(await response.json());
        setLoading(false);
        console.log(filter)
      }
    };

    getProducts();

    // move the return statement to the last line of your useEffect hook
    return () => {
       componentMounted = false;
    }
  },[]);