时间戳

首页 > 解决方案 > 为什么 useEffect 会运行多次？

javascript - 为什么 useEffect 会运行多次？

问题描述

我正在使用 useEffect 从 API 获取数据。无论我做什么，useEffect 都会运行多次。

  const [productDetails, setProductDetails] = useState([]);

  useEffect(() => {
    fetch(
      `url`
    )
      .then(results => results.json())
      .then(results => {
        setProductDetails(results);
      });
  }, []);

我读到您没有在 useEffect 中设置状态，所以我尝试了另一种方法：

const [productDetails, setProductDetails] = useState([]);

  useEffect(() => {
    fetchAsync();
  }, []);

  async function fetchAsync() {
    // await response of fetch call
    let response = await fetch(
      `url`
    );
    // only proceed once promise is resolved
    let data = await response.json();
    // only proceed once second promise is resolved
    setProductDetails(data); // setting state after fetching data
  }

在这两种情况下，当我console.log(productDetails);多次返回结果时，我猜 useEffect 会运行多次。我想到了 useEffect 中的一个错误，并尝试了旧componentDidMount()的，但它总是一样的。结果多次返回。

是否有 100% 正确的方法来设置 API 调用并只返回一次结果？

标签： javascriptreact-native

解决方案

我很确定问题出在您发布的代码之外。

我猜想包含这个 useEffect 的组件是出于某种原因重新创建的。甚至可能是因为重新创建了父组件（或父-父...）。

推荐阅读