aquí está mi componente de reacción

 import './App.css'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons'; import { faTwitter } from '@fortawesome/free-brands-svg-icons'; import React from 'react'; import axios from 'axios'; const quoteIcon = <FontAwesomeIcon icon={faQuoteLeft} />; const twitterIcon = <FontAwesomeIcon icon={faTwitter} />; class App extends React.Component { state = { quote: '' }; componentDidMount(){ this.fetchQuote(); } fetchQuote = () => { axios.get("https://api.quotable.io/random") .then((response)=>{ const {quote} = response.data.content; this.setState({ quote }); }) .catch(error => console.log(error)); } render() { const { quote } = this.state; return ( <div id='wrapper'> <div id='quote-box'> <div className='quote-text'> <div id='quoteIcon'>{quoteIcon}</div><span id='text'>{this.state.quote}</span> </div> <div className='quote-author'>-<span id='author'></span></div> <div className='buttons'> <a href="link" className='button' id='tweet-quote'>{twitterIcon}</a> <button className='button' id='new-quote' onClick={this.fetchQuote}>New quote</button> </div> </div> </div> ); } } export default App;

No puedo hacer que la cotización se muestre en la pantalla. Traté de consola. registrar lo que estaba sucediendo después de recibir mi respuesta con axios y, por alguna razón, sigo recibiendo dos llamadas. Obtengo dos cotizaciones diferentes registradas. No estoy seguro de si es por eso que tengo problemas para renderizarlo.

Intenté usar otros métodos como buscar y aún obtengo respuestas duplicadas. ¿Estoy pensando que mi componenteDidMount() se está montando varias veces por alguna razón? pero no sé por qué haría eso. Pero lo necesito para cargar mi función cuando el componente se monta, así que no quiero dejar de usarlo. Cuando me deshago de él, obviamente no ejecuta mi función, pero creo que aún recibe respuestas dobles.