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

92
Views
¿Alguien puede explicarme cómo funciona el asíncrono en este escenario de useEffect?

tengo un evento onClick dentro de un niño:

 onClick={()=>{ //2. an image is clicked, and the choice is added to the choiceOrder state, and then a jsonupdate is called -- 3. in ChooseBy.js //onclick, add or remove the choice choosebyprops.setChoiceOrder(choiceOrder => { if (choiceOrder.includes(attrprops.attrChoice)) { const choiceIndex = choiceOrder.findIndex(attrprops.attrChoice); choosebyprops.setJsonList((_, i) => i !== choiceIndex+1) return choiceOrder.filter(list => list !== attrprops.attrChoice); } else { const newList = [...choiceOrder, attrprops.attrChoice]; return newList } }); attrprops.setSelectedAttr( selectedAttr=>(selectedAttr!==attr ? attr : null) ); }}

después de ese clic, necesito una lista para actualizar:

 useEffect(()=>{ if(selectedAttr==null){ publishprops.setBuysideChoice( buysideChoice => ({'car_option':buysideChoice['car_option'],'zip_code':buysideChoice['zip_code']}) ); publishprops.setAttrNumber(2); } else { publishprops.setBuysideChoice( buysideChoice => ({...buysideChoice,"body_type": selectedAttr}) ); publishprops.setAttrNumber(4); }; },[selectedAttr]) useEffect(()=>{ const choiceOrder = choosebyprops.choiceOrder; if (choiceOrder.includes(attrChoice) && choiceOrder[choiceOrder.length-1]==attrChoice) { console.log('this json1',choosebyprops.jsonList) choosebyprops.setJsonList(jsonList => [...jsonList, UpdateJson(allprops)]); //delayed } },[choosebyprops.choiceOrder])

pero cuando la UpdateJson(allprops) se activa en el segundo useEffect, se retrasa. si realizo un pequeño cambio y guardo, veré la actualización en console.log, pero no soluciona el problema.

También he intentado agregar esto:

const [rerender, setRerender] = useState(false);

y agregando setRerender(!rerender) en el mismo useEffect.

También intenté crear un useEffect en el padre:

 useEffect(()=>{ console.log(jsonList) },[publishprops.buysideChoice])

entonces... sé que useEffect es una función asíncrona. lo que no entiendo es como ajustar eso. Leí algo sobre cómo necesitas usar el estado anterior. Pensé que me había ocupado de eso con la devolución de llamada: choosebyprops.setJsonList(jsonList => [...jsonList, UpdateJson(allprops)]);

realmente confundido acerca de todo este concepto.

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

0

ok, después de jugar un poco, decidí volver a renderizar el componente principal y ver qué pasaba... ¿no lo adivinarías? Eso es lo que funcionó.

Agregué esto al padre:

 useEffect(()=>{ setRerender(!rerender) },[choiceOrder])

y luego pasé el rerender al niño. luego cambié el efecto de uso del niño para disparar si algo le sucedía al estado de renderizado del padre.

 useEffect(()=>{ const choiceOrder = choosebyprops.choiceOrder; const setJsonList = choosebyprops.setJsonList if (choiceOrder.includes(attrChoice) && choiceOrder[choiceOrder.length-1]==attrChoice) { console.log('this json1',choosebyprops.jsonList) setJsonList(jsonList => [...jsonList, UpdateJson(allprops)]); //delayed } },[choosebyprops.rerender])

ahora... a mí me parece que lo estoy volviendo a renderizar varias veces, pero bueno, funciona.

Todavía me encantaría una explicación, porque por lo que deduzco:

  1. el niño actualiza el estado de un padre
  2. el padre, por alguna razón, no se volvió a renderizar, por lo que debe hacer que se vuelva a renderizar
  3. una vez que el padre vuelve a renderizar, la función asíncrona del hijo se completa

esto me suena muy mal :/

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!