Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

190
Views
Cómo cambiar fragmentos de código de componente de clase a componente funcional

Aquí está el código del fragmento que quiero cambiar a un componente funcional, escribo casi mi código aquí ahora, verifique.

 import _ from 'lodash'; import { ListItem, SearchBar, Avatar } from 'react-native-elements'; import { getUsers, contains } from './api/index'; function App(props) { const [loading, setLoading] = useState(false); const [data, setData] = useState([]); const [error, setError] = useState(null); const [fullData, setFullData] = useState([]); const [query, setQuery] = useState(); useEffect(() => { makeRemoteRequest(); },[query]); const makeRemoteRequest = _.debounce(() => { setLoading(true); getUsers(20, query) .then((users) => { setLoading(false); setData(users); setFullData(users); }) .catch((error) => { setLoading(false); }); }, 250); const handleSearch = (text) => { const formattedQuery = text.toLowerCase(); const data = _.filter(fullData, (user) => { return contains(user, formattedQuery); }); // I want to change the below code to work on Functioanl component // this.setState({ data, query: text }, () => //this.makeRemoteRequest()); // New code here..... };

Lo implementé de una manera diferente pero no funcionó.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Está tratando de crear un conjunto de datos y texto, luego llama a una devolución de llamada después del conjunto.

Hay varias formas de obtener este comportamiento.

Lo que le sugiero es tener un estado ( useState ) que incluya datos y texto y luego escuche los cambios de esta etapa a través de useEffect .

 export default function App() { const [request, setRequest] = useState({data: {}, text: ''}); const makeRemoteRequest = useCallback(() => console.log({request}),[request]); useEffect(() => { //on mount setRequest({data: {obj:'with data'}, text: 'text'}) },[]) useEffect(() => { makeRemoteRequest() },[request,makeRemoteRequest]) return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }

Lo que puedes ver aquí, es un componente funcional que es:

  • establecer un estado en el montaje (leer comentario)
  • defina una función makeRemoteRequest cada vez que la request de estado cambie a través del gancho useCallback
  • llame a la función makeRemoteRequest cada vez que la request de estado o la devolución de llamada makeRemoteRequest cambie a través del gancho useEffect

EDITAR:

 import _ from 'lodash'; import { ListItem, SearchBar, Avatar } from 'react-native-elements'; import { getUsers, contains } from './api/index'; function App(props) { const [loading, setLoading] = useState(false); const [data, setData] = useState([]); const [error, setError] = useState(null); const [fullData, setFullData] = useState([]); const [query, setQuery] = useState(); useEffect(() => { makeRemoteRequest(); },[query]); const makeRemoteRequest = _.debounce(() => { setLoading(true); getUsers(20, query) .then((users) => { setLoading(false); setData(users); setFullData(users); }) .catch((error) => { setLoading(false); }); }, 250); const handleSearch = (text) => { const formattedQuery = text.toLowerCase(); const data = _.filter(fullData, (user) => { return contains(user, formattedQuery); }); setData(data); setQuery(text); } };

En realidad, lo que quiere es activar la función makeRemoteRequest , ahora mismo lo que tiene que hacer para obtenerla es hacer el conjunto adecuado (lo que significa setQuery), que activará el useEffect

about 4 years ago · Juan Pablo Isaza Report

0

Puedes tener algo como lo siguiente.

 const [query, setQuery] = useState(); const [data, setData] = useState(); useEffect(() => { makeRemoteRequest(); }, [query])

Lea más sobre useEffect aquí

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!