React Hook useEffect ：使用 axios 和 async await .api 获取数据，调用连续相同的 api答案

【问题标题】：React Hook useEffect : fetch data using axios with async await .api calling continuous the same apiReact Hook useEffect ：使用 axios 和 async await .api 获取数据，调用连续相同的 api
【发布时间】：2020-01-06 01:27:12
【问题描述】：

当我从API 获取数据并使用useEffect 将响应设置为数组时它调用API 重复连续。

let [product, setproduct] = useState([]);

async function fetchData() {
    let response = await axios(
      `api`
    );
    let user = await response.data;
    setproduct(user);
    console.log(product);
  }

  useEffect(() => {
    fetchData();
  });

【问题讨论】：

标签： reactjs api axios

【解决方案1】：

将空的 [] 作为第二个参数传递给 useEffect 方法。它将在初始渲染时调用，如下所示。

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

【讨论】：

【解决方案2】：

来自docs，

useEffect 是否在每次渲染后运行？ 是的！默认情况下，它会在第一次渲染后和每次更新后运行。（我们稍后会讨论如何自定义它。）与其考虑“安装”和“更新”，您可能会发现更容易认为效果发生在“渲染后”。 React 保证 DOM 在运行效果时已经更新。

您可以提供空的依赖数组/[] 作为useEffect 的第二个参数，它与componentDidMount 相同，在组件生命周期中只执行一次。

useEffect(() => {
    fetchData();
}, []); //This will run only once

【讨论】：