React приложение посылает огромное количество fetch-запросов?

Question

[xDKey]

Доброго времени суток. Только учусь, делаю учебный проект - "кинопоиск" на минималках с использованием the movie db api.
По замыслу - приложение должно посылать get-запрос к БД через api, на основе ответа рендерить карточки с фильмами. И в прототипе это и происходит, но запросы идут непрерывным потоком, что приводит к тормозам да и вообще не нужно.
Ввиду неопытности и/или глупости не представляю где проблема - в применении fetchAPI или в логике в целом?

class App extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  fetchApi() {
    fetch(URL)
      .then(res => res.json())
      .then(data => {
        this.setState(data.results); //ответ записываем в стэйт
      });}
  render() {
    this.fetchApi(); //посылаем запрос
    return (
      <div className="movie-list">
        <MovieCard data={this.state} /> //выводим карточки с передачей стэйта в пропсы
      </div>
    );}
class MovieCard extends React.Component {
  render() {
    let data = this.props.data;

    let movieItem = Object.values(data).map(element => element);  //т.к. в ответ получаем объект с объектами, проходимся по нему
    return movieItem.map(movie => ( //и еще раз, уже по объекту с данными о фильме
      <div>
        <h1>{movie.title}</h1>
        <img
          src={baseImgUrl + movie.poster_path}
          alt={movie.original_title}
        />
        <p>{movie.overview}</p>
      </div>
    ))}}

Answer 1

[McBernar]

1. В componentDidMount делаем запрос к api и сохраняем в стейт результат.
2. В render получаем результат из this.state и циклом выводим карточки с фильмами.
3. Если нужно догрузить еще карточек — сделайте это по клику на кнопку. Клик вызовет fetch, стейт изменится, карточки дорисуются.

Answer 2

[Владимир]

У тебя в каждом рендере стоит this.fetchApi() а в нем ты меняешь стейт, почитай в какой момент выполняется рендер

1) Почитай про жизненный цикл
https://reactjs.org/docs/state-and-lifecycle.html

3) На будущее почитай про redux + (redux-thunk or redux-saga)

Answer 3

[jamtuson]

Вы в рендере вызываете fetchApi(); в котором идет обновление состояния, что в свою очередь вызывает обновления компонента и тем самым вызывает снова fetchApi();
Совет: fetchApi(); вызывайте в хуке жизненного цикла componentDidMount