Entonces, en mi viaje de aprendizaje, construí esta aplicación simple, muestra una cotización de una API y la muestra con cada clic de botón, tuve problemas cuando intenté mostrar la cotización y usé algo de vanilla. JavaScript. Aquí está mi código
function App() { const [error , setError] = useState(null); const [isLoaded ,setIsLoaded] = useState(false); const [dataQuotes , setDataQuotes] = useState([]); useEffect(() => { fetch('https://type.fit/api/quotes') .then(res => res.json()) .then( (results) => { setIsLoaded(true) setDataQuotes(results) }, (error) => { setIsLoaded(true) setError(error) } ) },[]) function getQuote(){ const Quotes = dataQuotes const randomNumber = Math.floor(Math.random()*Quotes.length) const finalData = Quotes[randomNumber]?.text document.getElementById('content').innerHTML=`"${finalData}"` } if (error) { return <div>Error :{error.message}</div> } else if (!isLoaded) { return <div>Loading...</div> } else { return ( <> <div className='container'> <h3 id='content'>{}</h3> </div> <button onClick={getQuote} className='btn'>Generate Quotes</button> </> ); } }¿Hay alguna modificación que pueda aplicar para que el código sea más limpio, porque siento que puedo hacerlo mejor y más limpio?
La mayor parte ya se ve limpia. He señalado algunos cambios a continuación.
function App() { const [error , setError] = useState(null); const [isLoaded ,setIsLoaded] = useState(false); const [dataQuotes , setDataQuotes] = useState([]); const ref = useRef(); useEffect(() => { fetch('https://type.fit/api/quotes') .then(res => res.json()) .then( (results) => { setIsLoaded(true) setDataQuotes(results) }, (error) => { setIsLoaded(true) setError(error) } ) },[]) function getQuote(){ const Quotes = dataQuotes const randomNumber = Math.floor(Math.random()*Quotes.length) const finalData = Quotes[randomNumber]?.text //document.getElementById('content').innerHTML=`"${finalData}"` ref.current.innerHTML = finalData } return ( <> {error ? <div>Error :{error.message}</div> : !isLoaded ? <div>Loading...</div> : <> <div className='container'> <h3 id='content' ref={ref}>{}</h3> </div> <button onClick={getQuote} className='btn'>Generate Quotes</button> </> } </> ); } }Tienes dos veces setIsLoaded(true) : una en .then y otra en .error . Puede usar .finally(() => { setIsLoaded(true) } .