Question

为什么即使检查是否已加载，React Hooks Axios API调用也返回两次？

我已经习惯了this.setState，但是试图理解它为什么在控制台日志中两次出现的原因。

我的代码：

import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [users, setUsers] = useState({ results: [] });
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);

      await axios
        .get("https://jsonplaceholder.typicode.com/users/")
        .then(result => setUsers(result));

      setIsLoading(false);
    };

    fetchData();
  }, []);

  console.log(
    users.status === 200 && users.data.map(name => console.log(name))
  );

  return <h2>App</h2>;
};

export default App;

Answer 1

这实际上是正常行为。这就是功能组件与useEffect（）一起工作的方式。在类组件中，状态更改时，“ this”关键字会发生突变。在带有挂钩的功能组件中，该函数会再次被调用，并且每个函数都有其自己的状态。由于您两次更新了状态，因此该函数被两次调用。

您可以在React钩子的创建者之一的专栏中仔细阅读这2篇文章，以了解更多详细信息。

https://overreacted.io/a-complete-guide-to-useeffect/

https://overreacted.io/how-are-function-components-different-from-classes/

Answer 2

两次大火，也许是一次来自componentDidMount，另一次是来自componentDidUpdate

https://reactjs.org/docs/hooks-effect.html

useEffect是否在每次渲染后运行？是!默认情况下，它在第一次渲染后和每次更新后都运行。（我们将在后面讨论如何自定义此功能。）您可能会发现更容易想到效果发生在“渲染后”，而不是“安装”和“更新”。 React保证DOM在运行效果时已被更新。

在触发API调用之前，您没有选中“ isLoading”

    // Only load when is not loading
    if (!isLoading) {
        fetchData();
    }

Answer 3

即使我有类似的问题。在我的情况下，useEffect()被调用两次是因为父组件由于数据更改而重新呈现。

为什么React Hooks Axios API调用返回两次？

3 个答案: