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
  }

在这两种情况下，当I

console.log（productDetails）时我多次返回结果，因此我猜useEffect会运行多次。我想到了useEffect中的一个bug，并尝试使用旧的
组件didmount（）
，但它总是一样的。结果会多次回来

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

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

是否有一种100%正确的方法来设置API调用并只返回一次结果？
我很确定问题不在您发布的代码范围内

我猜包含此useEffect的组件是出于某种原因重新创建的。甚至可能是因为重新创建了父组件（或父组件…）。
我很确定问题出在您发布的代码之外

我猜包含此useEffect的组件是出于某种原因重新创建的。甚至可能是因为重新创建了父组件（或父组件…）。
请检查父组件是否已调用此API。
在我的例子中，我在子组件中也调用了相同的API，因此useEffect调用了多次。
请检查父组件是否已经调用了此API。
  const [productDetails, setProductDetails] = useState([]);

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

在我的例子中，我在子组件中也调用了相同的API，结果，useEffect调用了多次。
我了解到您没有在useEffect中设置状态，所以我尝试了另一种方法
不正确您做得对。可能是您的父组件装载了两次/多次，导致此组件运行
useffect（）
multipletimes您的数据是从获取数组收到的吗？正如其他人所说，在这个钩子中设置状态没有什么错。请显示父组件OK。我做了一些测试。似乎加载状态导致它重新加载。设置产品详细信息（结果）后；我设置了一个setLoading（false），这会导致我的结果返回两次。为什么会这样？我应该把setLoading（true）和setLoading（false）放在哪里？谢谢
我读到你没有在useffect中设置state，所以我尝试了另一种方法
不正确你做得对。可能是您的父组件装载了两次/多次，导致此组件运行
useffect（）
multipletimes您的数据是从获取数组收到的吗？正如其他人所说，在这个钩子中设置状态没有什么错。请显示父组件OK。我做了一些测试。似乎加载状态导致它重新加载。设置产品详细信息（结果）后；我设置了一个setLoading（false），这会导致我的结果返回两次。为什么会这样？我应该把setLoading（true）和setLoading（false）放在哪里？谢谢
  const [productDetails, setProductDetails] = useState([]);

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