Necesito ese efecto de uso en otro componente (no en un componente directamente conectado a App.js). ¿Cómo puedo rehacer y ponerlo en un archivo separado? ¿Será mejor que sea una función personalizada para un gancho personalizado? Este es el componente App.js:
import React, {useState, useEffect} from 'react'; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import axios from 'axios'; import Competitions from './components/Competitions'; import CompetitionForm from './components/CompetitionForm'; import Navigation from './components/Navigation'; import './styles/App.css' const App = () => { const [competitions, setCompetitions] = useState([]); const [defaultCompetitionValue, setDefaultCompetitionValue] = useState({}) useEffect(() => { axios.get('http://localhost:4000/app/getCompetitions') .then(res => res.data) .then(res => { for(let i = 0; i < res.length; i++) { competitions[i] = { "value": res[i].name, "label": res[i].name, "id": res[i]._id } }; setCompetitions(competitions); }) .then(() => setDefaultCompetitionValue({"value": competitions[0].value, "label": competitions[0].value})) }, [competitions]); if(competitions.length > 0 && defaultCompetitionValue) { return ( <div className = "container"> <Router> <div className = "sidebar"> <Navigation /> </div> <div className = "content"> <Switch> <Route exact path = "/homepage"> <Competitions competitions = {competitions} defaultCompetitionValue = {defaultCompetitionValue} /> </Route> <Route exact path = "/CompetitionForm"> <CompetitionForm competitions = {competitions}/> </Route> </Switch> </div> </Router> </div> ) } return (<></>) }; export default App;Necesito ese efecto de uso en otro componente (no conectado directamente a App.js). ¿Cómo puedo rehacer y ponerlo en un archivo separado? ¿Será mejor que sea una función personalizada para un gancho personalizado?
useEffect es un gancho que React proporciona para componentes funcionales. Y puede usar eso en cualquier componente importando desde reaccionar de la siguiente manera. No es necesario pasar de un componente a otro.
import { useEffect } from 'react';Para obtener más detalles, puede leer sus documentos oficiales aquí en ganchos. https://reactjs.org/docs/hooks-reference.html