#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-го элемента. Могу ли я решить эту проблему?