当我使用react hooks时,API被反复调用。

我使用的是 React Hooks 从现有的API中获取数据。以下是我的代码

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

export const People = () => {
  const [people, setPeople] = useState([]);
  const url = "http://127.0.0.1:5000/people";

  async function fetchData() {
    console.log("calling api .. ");
    const res = await fetch(url);
    res.json().then((res) => setPeople(res));
  }

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

  return (
    <div>
      <ul>
        {people &&
          people.map((person) => <li key={person.id}>{person.name}</li>)}
      </ul>
    </div>
  );
};

const Dashboard = (props) => {
  return (
    <div>
      <People />
    </div>
  );
};

export default Dashboard;

我遇到的问题是这个API被反复调用。请你告诉我,我在这里做错了什么。

谢谢你

解决方案:

目前,使用 useEffect(callback)执行 的回调 每次渲染.

尝试使用 useEffect一个空的依赖关系数组.

如果你想运行一个效果,并清理它 仅有一次你可以传递一个空数组([])作为第二个参数。这就告诉React,你的效果不依赖于道具或状态的任何值,所以它永远不需要重新运行.

  • 检查我的其他 回答 关于 useEffect 用例。
useEffect(() => {
  fetchData();
}, []);

至于其他组件,应该是这样的(意见)。

// Should be on the outer scope as the URL is decoupled from the component's logic
const url = "http://127.0.0.1:5000/people";

export const People = () => {
  const [people, setPeople] = useState([]);

  useEffect(() => {
  // This way fetchData won't re-assigned on every render
    async function fetchData() {
      console.log("calling api .. ");
      const res = await fetch(URL);

      // Consitstance, don't mix `then` and `await` syntax
      const people = await res.json();
      setPeople(people);
    }

    fetchData();
  }, []);

  return (
    <div>
      <ul>
        {people &&
          people.map((person) => <li key={person.id}>{person.name}</li>)}
      </ul>
    </div>
  );
};

给TA打赏
共{{data.count}}人
人已打赏
未分类

滚动,如何同时捆绑.css和min.css?

2022-9-12 10:49:18

未分类

如何在安全的SSL模式HTTPS下启动WEBrick Ruby服务器。

2022-9-12 10:49:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索