Question

我正在使用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调用并仅一次返回结果？

Answer 1

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

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

Answer 2

请务必检查父组件是否已调用此API。就我而言，我也在子组件中调用了相同的API，结果，useEffect被调用了多次。

为什么useEffect会运行多次？

2 个答案: