Estoy haciendo un generador de cotizaciones aleatorias simple. Aquí está mi código hasta ahora:
import React from "react"; import "./App.css"; function App() { const [quote, setQuote] = React.useState({ text: "", author: "", }); const [allQuotes, setAllQuotes] = React.useState([]); React.useEffect(() => { fetch("https://type.fit/api/quotes") .then((res) => res.json()) .then((data) => setAllQuotes(data)); }, []); function getQuote() { const randomNumber = Math.floor(Math.random() * allQuotes.length); const text = allQuotes[randomNumber].text; const author = allQuotes[randomNumber].author; setQuote((prevQuote) => ({ ...prevQuote, text: text, author: author, })); } return ( <div className="App"> <p>{quote.text}</p> <p>{quote.author}</p> <button onClick={getQuote}>New quote</button> </div> ); } export default App;El problema es que no sé cómo cargar una página con una cotización ya. El botón funciona, está bien, pero quiero tener una cotización desde el principio. Intenté diferentes cosas, como el evento onLoad:
<div className="App" onLoad={getQuote}>pero no funciona
Puede usar otro useEffect que establece la quote cuando se allQuotes :
const {useState, useEffect} = React; function App() { const [quote, setQuote] = useState({ text: "", author: "", }); const [allQuotes, setAllQuotes] = useState([]); useEffect(() => { fetch("https://type.fit/api/quotes") .then((res) => res.json()) .then((data) => setAllQuotes(data)); }, []); // useEffect to set 'quote' on change of 'allQuotes' value useEffect(() => { if(allQuotes.length) getQuote(); }, [allQuotes]); function getQuote() { const randomNumber = Math.floor(Math.random() * allQuotes.length); const text = allQuotes[randomNumber].text; const author = allQuotes[randomNumber].author; setQuote((prevQuote) => ({ ...prevQuote, text: text, author: author, })); } return ( <div className="App"> <p>{quote.text}</p> <p>{quote.author}</p> <button onClick={getQuote}>New quote</button> </div> ); } ReactDOM.createRoot(document.getElementById("root")).render(<App />); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>