Axios не отменяет несколько запросов

#reactjs

#реагирует на

Вопрос:

Я пытаюсь отменить все предыдущие запросы при поиске покемонов в разделе ввода. Я могу искать покемонов, но каждый раз, когда я ищу, мой код отображается один раз дополнительно. если я буду искать bulbasor, он покажет несколько bulbasor

Первоначально он визуализируется 1 раз. после 1-го поиска он отображается 2 раза. после 2-го поиска он повторяется 3 раза и так далее…

 import { useState, useEffect } from 'react' import axios from 'axios'; import Pokemon from './pokemon'; import { FaSearch } from 'react-icons/fa'  function App() {  const [pokemons, setPokemons] = useState([])  const [pokeInput, setPokeInput] = useState('')  const cancelToken = axios.CancelToken  const source = cancelToken.source()   useEffect(() =gt; {  for (let i = 1; i lt; 10; i  ) {  axios.get(`https://pokeapi.co/api/v2/pokemon/${i}`, {  cancelToken: source.token  })  .then(res =gt; {  setPokemons((poke) =gt; {  return [...poke, res.data]  })  })  .catch(err =gt; {  console.log(err)  })  }  return () =gt; source.cancel()  }, [pokeInput])   const pokeSort = pokemons.filter((pokemon) =gt; {  return pokemon.name.toLowerCase().includes(pokeInput.toLowerCase())  })   let pokeInputChange = (e) =gt; {  setPokeInput(e.target.value)  }   return (  lt;div className="App"gt;  lt;form className='search'gt;  lt;h1gt;Search Pokemonlt;/h1gt;  lt;div className='form'gt;  lt;input  onChange={pokeInputChange}  type="text"  placeholder='Search Pokemon'  id="pokeSearchBar"  className='searchbar'  /gt;  lt;span className='search_icon'gt;lt;FaSearch /gt;lt;/spangt;  lt;div className="extra1"gt;lt;/divgt;  lt;div className="extra2"gt;lt;/divgt;  lt;button className='go'gt;GOlt;/buttongt;  lt;/divgt;  lt;/formgt;   {  pokeSort.map((pokemon, index) =gt; {  console.log(pokemons)  return (  lt;Pokemon  key={index}  name={pokemon.name}  type={pokemon.types}  moves={pokemon.moves}  height={pokemon.height}  weight={pokemon.weight}  front_image={pokemon.sprites.front_default}  back_image={pokemon.sprites.back_default}  /gt;  )  })  }  lt;/divgt;  ); }  export default App;  

Комментарии:

1. Пожалуйста, опубликуйте больше кода, особенно все, где вы меняете состояние, которое может вызвать повторную отправку

2. Может быть, я неправильно понял, что вы имели в виду под рендером и что вы пытаетесь с ним сделать cancel . Как написано, вы накапливаете все новые вызовы API, и они никогда не очищаются. Ваш useEffect на самом деле не зависит от pokeInput . Если вы удалите это и измените строку на }, []) такое поведение, которого вы ожидаете?

3. @possum есть еще одна вещь, моя функция pokeSort.map отображает n раз для n-го элемента. Могу ли я решить эту проблему?