組件陣列在每次狀態更改時重新初始化-有解無憂

我正在開發一個用于創建培訓計劃的表格并顯示一周，我首先創建一個所有天的陣列。渲染的日期取決于當前日期（狀態）。問題是每次我更改當前日期，即單擊另一個日期選項卡時，陣列似乎被重新初始化（我console.log在陣列中放了一個 for each day，如代碼中所示）。

我真的希望找到一種解決方案，它可以創建所有天，然后只需從陣列中選擇一個，而無需在每次訪問一天時重新創建陣列。

你有什么建議嗎？

我嘗試過（除其他外）：重構組件（之前沒有“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;

uj5u.com熱心網友回復：

您的問題是您days為該組件的每次重新渲染進行初始化。

對于潛在的修復，您應該為添加另一個狀態days，并且僅days在state.currentWeek或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;

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/490671.html

標籤：javascript 反应数组反应上下文

上一篇：如何將新陣列添加到現有陣列并在JavaScript中回傳新陣列？[復制]

下一篇：如何從陣列B中獲取陣列A的每個元素的最近鄰