Estoy representando un componente de clase Rates dentro del componente funcional de App.js.

Cuando se carga la página, la función componentDidMount se llama dos veces.

Aquí está App.js :

 import './App.css'; import Rates from './views/Rates'; function App() { return ( <div className="App"> <header className="App-header"> <div className="header-container"> <div style={{width: '33%'}}></div> <div style={{width: '33%'}}><h2>Farmr</h2></div> <div style={{width: '33%'}} className="account-section"> <button className='btn' type='button'>Sign In</button> </div> </div> <div className="toolbox-container"> <ul className="toolbar"> <li>List One</li> <li>List Two</li> <li>List Three</li> </ul> </div> </header> <div className="main-body"> <Rates/> </div> </div> ); } export default App;

Y aquí está Rates.js :

 import React from "react"; import axios from "axios"; class Rates extends React.Component { constructor(props) { super(props); this.state = { rates: [] }; } componentDidMount() { console.log('mount'); } render() { return ( <div> <div>Rates</div> </div> ); } } export default Rates;

No hay representación condicional del componente, por lo que no estoy seguro de dónde proviene la llamada duplicada.