//state.buttons is an array - it is used to map buttons to a menu function NavMenu() { const buttons = useSelector((state) => state.buttons); const dispatch = useDispatch(); const navButtons = buttons.map((button) => { const checkDirection = (button) => { if (button.pageNo >= button.prevPageNo) { dispatch(updateButtonsData({ newDirection: 1 })); } else { dispatch(updateButtonsData({ newDirection: -1 })); } }; checkDirection(button); return ( <li key={button.id} > <NavButton buttonData={button} /> </li> ); }); return <ul>{navButtons}</ul>; } export default NavMenu; //buttonSlice const initialState = [ { id: 'homeId', prevPageNo: null, pageNo: 1, direction: 1, firstAnimFrame: 1, lastAnimFrame: 1, }, { id: 'aboutId', prevPageNo: null, pageNo: 2, direction: 1, firstAnimFrame: 1, lastAnimFrame: 11, },{...} const buttonsSlice = createSlice({ name: 'ui', initialState, reducers: { updateButtonsData: { reducer(state, action) { state = action.payload; }, prepare( id, newPrevPageNo, pageNo, newDirection, newFirstFrame, newLastFrame ) { return { payload: { id, prevPageNo: newPrevPageNo, pageNo, direction: newDirection, firstAnimFrame: newFirstFrame, lastAnimFrame: newLastFrame, };},},},},});Hola, tengo un menú de navegación donde varios parámetros deben actualizarse dinámicamente dentro de la interfaz de usuario cuando un usuario presiona un botón. Cada botón se comportará de manera diferente según el botón anterior que se presionó (el orden de los botones presionados es importante). Mi solución es comparar el estado inicial de la matriz de botones de navegación con cada reasignación posterior. Pensé que sería bueno almacenar el historial del botón previamente presionado como un valor dentro de la matriz de objetos de navegación. Cada vez que se actualiza la navegación, se agregan nuevos parámetros y se puede acceder a ellos como accesorios dentro del botón asignado y luego se puede acceder a ellos al hacer clic.
Actualmente, la función de envío no funciona con mi código y la matriz de botones asignados permanece sin cambios.
Supongo que está "activando" los datos de actualización a través de checkDirection(button); y no onClick Event.
primero, este es un código "no-go":
const navButtons = buttons.map((button) => { const checkDirection = (button) => { if (button.pageNo >= button.prevPageNo) { dispatch(updateButtonsData({ newDirection: 1 })); } else { dispatch(updateButtonsData({ newDirection: -1 })); } }; checkDirection(button); return ( <li key={button.id} > <NavButton buttonData={button} /> </li> ); }); return <ul>{navButtons}</ul>; }Si desea activar una función mientras representa un elemento, colóquelo dentro de useEffect y no "fuera".
Entonces, transfiera ese código dentro de NavButton como:
const checkDirection = useCallback(button) => { if (button.pageNo >= button.prevPageNo) { dispatch(updateButtonsData({ newDirection: 1 })); } else { dispatch(updateButtonsData({ newDirection: -1 })); } }, []); useEffect(() => checkDirection(button), [checkDirection, button]);