Реагировать на запрос выборки из внешнего API после нажатия карты

Question

У меня есть один маленький вопрос. Мое приложение получает запрос после нажатия на карту. Но у меня есть некоторые проблемы. Мой запрос на выборку выполняется каждый раз, но он должен выполняться только после нажатия. Поэтому мой запрос на выборку выглядит следующим образом:

  useEffect(() => {
    let endpointForPokemonDetails = `${API_URL}${index}`;
    fetchPokemonDetails(endpointForPokemonDetails);
  });

  const fetchPokemonDetails = (endpointForPokemonDetails) => {
    fetch(endpointForPokemonDetails)
      .then((result) => result.json())
      .then((result) => {
        setPokemon([Pokemon, result]);
      }, setLoading(false))
      .catch((error) => console.log("Error:", error));
  };

Прежде чем я нажму на карту, у меня есть несколько ошибок в console.log:

Можете ли вы знать как это исправить?

Answer 1

Используя useEffect, вы сообщаете React, что ваш компонент должен что-то делать после рендеринга. React запомнит переданную вами функцию (мы будем называть ее нашим «эффектом») и вызовет ее позже после выполнения обновлений DOM

Так что причина, по которой вы получаете ошибку, заключается в том, что вы используете useEffect , Это вызовет API после рендеринга с index = undefined

. Вы можете удалить метод useEffect и вызвать fetchPokemonDetails для onClickHandler

Answer 2

Используйте onClick prop на вашей кнопке (или любом другом элементе HTML):

<button type="button" onClick={() => fetchPokemonDetails(index)}>
Fetch pokemon
</button>

Также измените fetchPokemonDetails для принятия параметра индекса:

 const fetchPokemonDetails = (index) => {
    fetch(`${API_URL}${index}`)......

useEffect is React Hook, который используется для запуска побочных эффектов. См https://reactjs.org/docs/hooks-reference.html#useeffect

Answer 3

Вы можете использовать только событие нажатия, и поэтому вы используете функцию только после нажатия, вы не должны использовать useEffect. useEffect имеет побочный эффект.