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

264
Views
Reaccionar (Javascript): superposición de devoluciones de llamada

Implementé mi enlace personalizado "useReducerWithCallback"

 export default function useReducerWithCallback( reducer, initialState, initializer ) { const [state, dispatch] = useReducer(reducer, initialState, initializer); const callbackRef = useRef(undefined); const customDispatch = (action, callback) => { callbackRef.current = callback; console.log("Callback updated"); // <------- dispatch(action); }; useEffect(() => { console.log("Executing callback"); // <-------- callbackRef.current?.(state); }, [state]); return [state, customDispatch]; }

que básicamente funciona como el típico useStateWithCallback pero con un useReducer.

Estoy usando este enlace en un proveedor de contexto, que se consume en una pantalla que está dentro de un navegador de pila.

Esta pantalla tiene un oyente para mi base de datos, y cuando se activa, la pantalla se comunica con el reductor de mi proveedor de contexto, pasando una devolución de llamada personalizada.

El problema que tengo es cuando presiono otra instancia de la misma pantalla en mi navegador de pila, ya que ambas pantallas escuchan la misma parte de la base de datos, se comunican con el proveedor de contexto al mismo tiempo y sus devoluciones de llamada se superponen.

Superposición de devoluciones de llamada

Este es mi proveedor de contexto:

 function contentsReducer(contents, action) { ... } export function ContentsProvider({ children }) { const [contents, dispatch] = useReducerWithCallback( contentsReducer, new Map([]) ); ... const addContents = (contents, callback = undefined) => { console.log("Adding contents"); <------ dispatch( { type: "add-contents", contents, }, callback ); }; ... }

Las pantallas de pila 1 y 2 (la última presionada) son iguales. Ambos se comunican con el proveedor de contexto usando su método "addContents", que ves en el código anterior, pero por alguna razón, las devoluciones de llamada se superponen.

Este es el resultado de useReducerWithCallback:

 Adding contents Callback updated Adding contents Callback updated Executing callback Executing callback

Cuándo debería ser:

 Adding contents Callback updated Executing callback Adding contents Callback updated Executing callback

¿Algunas ideas? Creo que el problema es por la centralización del reductor en un único punto, el proveedor de contexto, pero no sé cómo solucionarlo.

Gracias.

about 4 years ago · Juan Pablo Isaza
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!