Запрос на получение Axios находится в бесконечном цикле

Question

У меня есть это приложение Reactjs, и оно потребляет Marvel API . Но как только он запускается, он начинает делать GET-запрос и больше никогда не останавливается.

Я пытался использовать асинхронную / ожидающую и обещающую конфигурацию для моего axios метода get, но результатто же самое: запрос ifinite

Main.js

export default class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      heroes: [],
      search: "",
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
    this.loadHeroes();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.searc !== this.state.search) {
      this.loadHeroes();
    }
  }

  loadHeroes = async () => {
    const PUBLIC_KEY = process.env.REACT_APP_PUBLIC;
    const PRIVATE_KEY = process.env.REACT_APP_PRIVATE;
    const timestamp = Number(new Date());
    const hash = md5.create();
    hash.update(timestamp + PRIVATE_KEY + PUBLIC_KEY);

    const response = await api
      .get(
        `/characters?limit=10&ts=${timestamp}&apikey=${PUBLIC_KEY}&hash=${hash}`
      )
      .then(response => {
        this.setState({ heroes: response.data.data.results });
      });

  handleChange(event) {
    this.setState({ search: event.target.value });
  }

  handleSubmit(event) {
    console.log("State do search: ", this.state.search);
    event.preventDefault();
  }

//render method ommited

api.js

import axios from "axios";

const api = axios.create({
  baseURL: `http://gateway.marvel.com/v1/public`
});

export default api;

Смотрите, что в URL яМы установили лимит в 10 запросов (это доступный шаблон API). Но даже при том, что проблема возникает.

Answer 1

Это из-за вашего условия if, prevState.searc всегда будет неопределенным, поскольку оно не существует и, следовательно, не равно this.state.search. componentDidUpdate проверяет условие (проходит), запускает логику, состояние обновления логики, повторные триггеры componentDidUpdate и цикл бесконечен:

  componentDidUpdate(prevProps, prevState) {
    if (prevState.searc !== this.state.search) {
      this.loadHeroes();
    }
  }

Возможно, вы имели в виду:

  componentDidUpdate(prevProps, prevState) {
    if (prevState.search !== this.state.search) {
      this.loadHeroes();
    }
  }