时间戳

首页 > 解决方案 > React Hook useEffect ：使用 axios 和 async await 获取数据 .api 调用连续相同的 api

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

问题描述

当我从一个数组中获取数据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();
  });

标签： reactjsapiaxios

解决方案

从文档中，

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

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

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

推荐阅读