Así que estaba tratando de obtener algunos datos de anime en función de las opciones que tengo en seleccionar (género), el problema es que la recuperación no ocurre en Cambiar en mi selección solo después de cambiar la opción dos veces, he intentado usar useEffect pero el problema con eso, se está recuperando inmediatamente sin cambiar el valor de selección.
¿alguien puede ayudarme y explicarme que estoy haciendo mal?
aquí está mi código en codesandbox
índice.js
function App() { const [list,setList]=useState([]) const [genre,setGenre]=useState(0) const fetchData=()=>{ const options = { method: 'GET', url: `https://jikan1.p.rapidapi.com/genre/anime/${genre}/1`, headers: { 'x-rapidapi-host': 'jikan1.p.rapidapi.com', 'x-rapidapi-key': '*******************************' } }; axios.request(options).then(function (response) { console.log(response.data.anime); setList(response.data.anime) }).catch(function (error) { console.error(error); }); } const handleChange=(e)=>{ setGenre(e.target.value) fetchData() } return ( <div className="mx-auto px-8 py-4 flex flex-col justify-center"> <div> <h1>Design with Tailwind</h1> <select name="genre" className='p-2 bg-bg-prime' id="genre" onChange={handleChange}> <option value="1" >Action</option> <option value="2" >Adventure</option> <option value="4" >Comedy</option> </select> </div> <div> {list && ( list.map((an)=>( <p key={an.title}>{an.title}</p> )) )} </div> </div> ) } const rootElement = document.getElementById('root') ReactDOM.render(<App />, rootElement)Mientras llama a fetchData después de setGenre , de acuerdo con los documentos de reacción :
Las actualizaciones de estado pueden ser asincrónicas
Entonces, básicamente, se llama fetchData antes de que el valor del estado se actualice (y esto hace que su solicitud se realice con el valor anterior en lugar del solicitado). Una solución sería algo como:
... useEffect(() => { fetchData(); }, [genre]) const handleChange=(e)=>{ setGenre(e.target.value) }Si realmente desea mantener su enfoque, también podría hacer algo como:
const handleChange=(e)=>{ setGenre(e.target.value) fetchData(e.target.value) }y use la variable en buscar datos (por lo que
const fetchData = (selectedGenre) => { ... url: `https://jikan1.p.rapidapi.com/genre/anime/${selectedGenre}/1`, ...Recomiendo el primer enfoque, pero ambos deberían funcionar.
Además, si usa un valor válido como valor inicial para el género junto con el primer enfoque, puede completar la lista de forma predeterminada (para su ejemplo const [genre,setGenre]=useState(1) )
No pude ver nada en su codesandbox.
Creo que el enfoque correcto sería usar useEffect como lo estaba intentando, de esta manera se asegura de que el valor de 'género' que está usando en su función 'fetchData' sea el correcto.
Ahora, lo único que faltaba era un estado para evitar que la función 'fetchData' se ejecutara inmediatamente después de que se renderiza el componente y hacer que se ejecute solo después de haber cambiado el estado de 'género' por primera vez.
function App() { const [list,setList]=useState([]) const [genre,setGenre]=useState(0) const [selectCount, setSelectCount]=useState(0) const fetchData=async()=>{ const options = { method: 'GET', url: `https://jikan1.p.rapidapi.com/genre/anime/${genre}/1`, headers: { 'x-rapidapi-host': 'jikan1.p.rapidapi.com', 'x-rapidapi-key': '*******************************' } }; axios.request(options).then(function (response) { console.log(response.data.anime); setList(response.data.anime) }).catch(function (error) { console.error(error); }); } const handleChange=(e)=>{ setSelectCount(selectCount + 1) setGenre(e.target.value) } useEffect(() => { if (selectCount === 0) return fetchData() }, [genre]) return ...Your JSX goes here... } const rootElement = document.getElementById('root') ReactDOM.render(<App />, rootElement)