组件数组在每次状态改变时被重新初始化

Question

我正在开发一个用于创建培训计划的表单，为了显示一周，我首先创建了一个包含所有日期的数组。渲染的日期取决于当前日期(状态)。问题是，每次我改变当前的日子，即单击另一个日期选项卡，数组似乎被重新初始化(我把每一天的console.log在数组中，可以在代码中看到)。

我真的希望找到一个解决方案，创建所有的日子，然后简单地从数组中选择一个，而不是每次访问一天时重新创建数组。

你有什么建议吗?

我尝试过(在其他事情中):重构组件(之前，没有"WeekView"， "DayView")，useMemo-hook。

源:

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;

Answer 1

你的问题是你初始化days为该组件的每次重新渲染。

对于潜在的修复，您应该为days添加另一个状态，并且仅在state.currentWeek或state.daysPerWeek发生更改时更新days。

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;