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.
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:
esto me suena muy mal :/