API вызывается снова и снова, когда я использую реагирующие хуки

Question

Я использую 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 вызывается снова и снова. Пожалуйста, дайте мне знать, что я делаю не так.

Спасибо

Answer 1

В настоящее время при использовании 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>
  );
};