¿Cómo realizo mi solicitud de obtención cuando hago clic en un botón?
import axios from "axios"; import React,{useState} from 'react'; import ReactDOM from 'react-dom'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; export default function App(){ const [randomQuote,setRandomQuote] = useState(''); React.useEffect( () => { axios.get(baseURL) .then((res)=> { setRandomQuote(res.data); }); }, [] ); if (!randomQuote) return null; return ( <div> <QuoteCard quote={randomQuote.content} author={randomQuote.author} handleClick={} /> </div> )}
Mi componente QuoteCard tiene un botón 'generar', que cuando se hace clic generará otra cotización aleatoria de api.
function QuoteCard(props){ return( <div id="quoteCard" className="card shadow p-3"> <div className="text-center quoteText"> <h3 className="bold lead" style={props.textStyles}>{props.quote}</h3> </div> <div className="quoteAuthor"> <p className="float-end" style={props.textStyles}>- {props.author}</p> </div> <div className="buttons d-flex justify-content-between"> <div className="social-buttons d-flex justify-content-between"> <button className="btn btn-secondary m-1"> <i className="fab fa-twitter"></i> </button> <button className="btn btn-secondary m-1"> <i className="fab fa-instagram"></i> </button> </div> <div> <button className="btn btn-secondary" onClick={props.handleClick}>Generate</button> </div> </div> </div> );}
ReactDOM.render(<App/>,document.getElementById('root'));Soy bastante nuevo en el uso de ganchos en funciones en lugar de métodos de ciclo de vida, por lo que no estoy seguro de cómo volver a activar la solicitud de obtención en la propiedad 'handleClick'.
Como Chris mencionó, debe crear una función con un nombre como update y pegar axios allí:
import axios from "axios"; import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; export default function App() { const [randomQuote, setRandomQuote] = useState(''); const update = () => { axios .get(baseURL) .then((res) => { setRandomQuote(res.data); }); }; useEffect(update, []); if (!randomQuote) return null; return ( <div> <QuoteCard quote={randomQuote.content} author={randomQuote.author} handleClick={update} /> </div> ) }Hazlo asi:
const handleButtonClick = () => { axios.get(baseURL) .then((res)=> { setRandomQuote(res.data); }); } // then pass it to QuoteCard <div> <QuoteCard quote={randomQuote.content} author={randomQuote.author} handleClick={handleButtonClick} /> </div> //then in QuoteCard <div> <button className="btn btn-secondary" onClick={props.handleClick}>Generate</button> </div>Puedes crear una función como esta:
const getQuote = () => { axios.get(baseURL) .then((res)=> { setRandomQuote(res.data); }); }Para obtenerlo por primera vez cuando el componente se monta, haga lo siguiente:
useEffect(getQuote, []) Y luego pase la función a su componente a través de handleClick prop así:
<QuoteCard quote={randomQuote.content} author={randomQuote.author} handleClick={getQuote} />Entonces todo su componente se verá así:
import axios from "axios"; import React,{useState} from 'react'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; export default function App(){ const [randomQuote,setRandomQuote] = useState(''); const getQuote = () => { axios.get(baseURL) .then((res)=> { setRandomQuote(res.data); }); } React.useEffect(getQuote, []); if (!randomQuote) return null; return ( <div> <QuoteCard quote={randomQuote.content} author={randomQuote.author} handleClick={getQuote} /> </div> ) }