Tengo dos componentes, el componente de la aplicación y un componente SearchBar. El componente SearchBar es un componente funcional y el envío del formulario se maneja mediante un método llamado handleSubmit que se define en el componente de la aplicación y se transmite a través de accesorios. El método handleSubmit que se define en el componente de la aplicación que primero evita el comportamiento predeterminado del envío de formularios del navegador y luego realiza una llamada asíncrona a una API de YouTube. La llamada API siempre tiene éxito y funciona cada vez que busco algo a través del formulario, digamos "edificios". Pero quiero mostrar un video predeterminado cuando el componente se renderiza por primera vez, por ejemplo, "juegos". Así que llamé al método handleSubmit en componentDidMount, que da un error "Rechazo no controlado (Error de tipo): no se pueden leer las propiedades de undefined (leyendo 'preventDefault')". ¿Hay alguna forma de que pueda usar un objeto de evento dentro de componentDidMount?

Aquí está mi código:

aplicación:

 class App extends React.Component { constructor(props) { super(props); this.state = { inputValue: "", videos: [], selectedVideo: null, }; } componentDidMount() { this.handleSubmit("games"); } // handle form submission handleSubmit = async (query, e) => { e.preventDefault(); // API call }; // handle change in input onIputChange = (e) => { const inputValue = e.target.value; this.setState({ inputValue }); }; render() { const inputValue = this.state.inputValue; return ( <div> <SearhBar handleSubmit={(e) => this.handleSubmit(inputValue, e)} inputValue={inputValue} onInputChange={this.onIputChange} /> </div> ); }

Barra de búsqueda:

 function SearhBar(props) { return ( <form onSubmit={props.handleSubmit}> <label>Search Video</label> <input onChange={props.onInputChange} type="text" value={props.inputValue} /> </form> ); }