Tengo un componente de inicio que contiene 2 rutas codificadas y 2 asignadas, estoy analizando el objeto del plan en el componente del plan.
<Routes> <Route path='/' element={<Heading>index</Heading>}/> <Route path='/profile' element={<Profile />}/> {user && user.workoutPlans.map((plan, index) => ( plan._id && <Route path={'/' + plan._id} key={index} element={<Plan plan={plan} />} /> ))} </Routes>El componente del plan muestra el título del plan y contiene una sección donde asigna una matriz de días a DayCards
<Heading size='2xl' mr={-3}>{plan.title}</Heading> <Flex direction='column'> {plan.days.map((day, index) => ( day._id && <DayCard planId={plan._id} day={day} key={index} /> ))} </Flex>Si actualizo, voy a la ruta app.com/plan1id y obtengo la lista correcta de días [día1, día2, día3, día4, día5] + Título: Plan1
Si actualizo, voy a la ruta app.com/plan2id y obtengo la lista correcta de días [other1, other2, other3] + Título: Plan2
Pero si luego voy de app.com/plan2id a app.com/plan1id, obtengo una lista desordenada de días [otro1, otro2, otro3, día4, día5] + Título: Plan1
Es lo mismo en orden inverso
Pero si actualizo, voy a la ruta app.com/plan1id, luego llegué a app.com/profile y luego a app.com/plan2id, funciona correctamente y devuelve [other1, other2, other3] + Título: Plan2
El estado de la aplicación permanece igual todo el tiempo y los datos del plan se analizan correctamente, por lo que sé, porque plan.title siempre se muestra correctamente
Cualquier idea sobre por qué sucede esto sería muy apreciada.
No utilice el índice de la matriz como clave React.
Al cambiar de plan, la ruta cambia, pero el componente del Plan permanece montado y solo se actualiza el valor de prop del plan . Esto activa una nueva representación. Pero dado que los días usan un índice de matriz como clave React, la clave no cambia de valor. El índice de día 2 del plan "A" es igual al índice de día 2 del plan "B".
En su lugar, debe utilizar un valor que sea intrínseco a los datos que se están asignando. Los GUID son excelentes claves React. Sugiero usar day._id como la clave React, asumiendo que estos son únicos.
<Flex direction='column'> {plan.days .filter(day => day._id) .map((day) => <DayCard planId={plan._id} day={day} key={day._id} />) } </Flex> También puede corregir el código de enrutamiento para el componente Plan .
<Routes> <Route path='/' element={<Heading>index</Heading>} /> <Route path='/profile' element={<Profile />} /> {user?.workoutPlans .filter(plan => plan._id) .map((plan) => ( <Route path={`/${plan._id}`} key={plan._id} element={<Plan plan={plan} />} /> )) } </Routes>También debe usar accesorios exactos con Route <Heading> de lo contrario, cuando navegue a /profile u otras rutas, Heading recibirá primero la llamada.
Para obtener más referencias, consulte este enlace https://stackoverflow.com/a/49162423/4554623
<Routes> <Route exact path='/' element={<Heading>index</Heading>} /> <Route path='/profile' element={<Profile />} /> {user?.workoutPlans .filter(plan => plan._id) .map((plan) => ( <Route path={`/${plan._id}`} key={plan._id} element={<Plan plan={plan} />} /> )) } </Routes>