Estoy desarrollando un formulario para crear programas de entrenamiento y para mostrar una semana, primero creo una matriz de todos los días. El día que se representa depende del día actual (estado). El problema es que cada vez que cambio el día actual, es decir, hago clic en otra pestaña de día, la matriz parece reiniciarse (coloco un console.log para cada día en la matriz, como se puede ver en el código).
Realmente espero encontrar una solución que cree todos los días, y luego simplemente elija uno de la matriz sin crear la matriz nuevamente cada vez que se accede a un día.
¿Tienes alguna sugerencia?
Lo intenté (entre otras cosas): refactorizar componentes (antes, no había "WeekView", "DayView"), useMemo -hook.
Fuente:
import React, { useContext } from 'react'; import { ProgramContext } from '../state/context'; import { setCurrentDay } from '../state/reducer'; import { Tabs, TabWindow, WindowTab } from '../styled'; import DayView from './DayView'; const WeekView: React.FC = () => { const { state, dispatch } = useContext(ProgramContext); const handleDayClick = (index: number) => () => { if (index === state.currentDay) return; dispatch(setCurrentDay(index)); }; const days = [...Array(state.daysPerWeek).keys()] .map(i => i + state.currentWeek * state.daysPerWeek) .map(day => { console.log(day); return ( <DayView key={day} day={day} /> ) }); return ( <TabWindow> <Tabs> {[...Array(state.daysPerWeek).keys()].map(day => { return ( <WindowTab active={state.currentDay === day} key={day} onClick={handleDayClick(day)} > {`Dag ${(day % state.daysPerWeek) + 1}`} </WindowTab> ) })} </Tabs> {days[state.currentDay]} </TabWindow> ) }; export default WeekView;Su problema es que inicializa days para cada nueva representación de ese componente.
Para una solución potencial, debe agregar otro estado para los days y solo actualizar los days cuando se state.currentWeek o state.daysPerWeek .
import React, { useContext, useEffect, useState } from 'react'; import { ProgramContext } from '../state/context'; import { setCurrentDay } from '../state/reducer'; import { Tabs, TabWindow, WindowTab } from '../styled'; import DayView from './DayView'; const WeekView: React.FC = () => { const [days, setDays] = useState([]); const { state, dispatch } = useContext(ProgramContext); const handleDayClick = (index: number) => () => { if (index === state.currentDay) return; dispatch(setCurrentDay(index)); }; useEffect(() => { const updatedDays = [...Array(state.daysPerWeek).keys()] .map(i => i + state.currentWeek * state.daysPerWeek) .map(day => { console.log(day); return ( <DayView key={day} day={day} /> ) }); setDays(updatedDays) }, [state.currentWeek, state.daysPerWeek]) return ( <TabWindow> <Tabs> {[...Array(state.daysPerWeek).keys()].map(day => { return ( <WindowTab active={state.currentDay === day} key={day} onClick={handleDayClick(day)} > {`Dag ${(day % state.daysPerWeek) + 1}`} </WindowTab> ) })} </Tabs> {days.length && days[state.currentDay]} </TabWindow> ) }; export default WeekView;