親コンポーネントから受け取ったDateオブジェクトが意図した値にならない

Question

実現したいこと

Reactでカレンダーを作っています。
カレンダーの日付を割り当てるためのプログラムを作っているのですが、意図した日付の値にならない為、質問させていただきます。

ソースコード

import './App.css';
import DateBox from './components/DateBox';
import Nav from "./components/Nav";
import styled from 'styled-components';
import { useState } from 'react';



function App() {

  // styled-components →
  const Container = styled.div`
    margin: 10px;
  `;

  const DatesUl = styled.ul`
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid rgba(0, 0, 0, 0.54);
    border-bottom: none;
    border-right: none;
    padding: 0;
  `;
  // ← styled-components

  const [dates, setDates] = useState(new Date());
  const days = [];
  const weeks = ["日", "月", "火", "水", "木", "金", "土"];
  let nowYear = dates.getFullYear();
  let nowMonth = dates.getMonth() + 1;
  let firstDate = new Date(nowYear, (nowMonth-1), 1);
  let firstDay = firstDate.getDay();
  let startDate = new Date(firstDate);
  startDate.setDate(firstDate.getDate() - firstDay);
  for(let i = 0; i < 35; i++) {
    if (i < 7) {
      console.log(startDate);
      days.push(<DateBox topDays="true" week={weeks[i]} date={startDate} />);
    } else {
      console.log(startDate);
      days.push(<DateBox date={startDate} />);
    }
    startDate.setDate(startDate.getDate() + 1);
  }

  const changeMonth = (key) => { // 月移動関数
    if (key === "prev") {
      let newDates = new Date(dates.setMonth(dates.getMonth() - 1));
      setDates(newDates);
    } else if (key === "next") {
      let newDates = new Date(dates.setMonth(dates.getMonth() + 1));
      setDates(newDates);
    }
  }


  return (
    <Container>
      <Nav dates={dates} changeMonth={changeMonth} />
      <DatesUl>
        {days}
      </DatesUl>
    </Container>
  );
}

export default App;

import styled from 'styled-components';

const DateBox = (props) => {

  // styled-components →
  const DateLi = styled.li`
    list-style: none;
    height: 120px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.54);
    border-right: 1px solid rgba(0, 0, 0, 0.54);
    @media(min-width: 600px) {
      height: 155px;
    }
  `;

  const Day = styled.div`
    text-align: center;
    color: rgba(0, 0, 0, 0.54);
    margin-top: 5px;
    font-size: 12px;
  `;

  const Date = styled.div`
    text-align: center;
    margin-top: 5px;
    font-size: 12px;
  `;
  // ← styled-components


  return(
    <DateLi>
      {props.topDays ?
        <>
          <Day>{props.week}</Day>
          <Date>{props.date.getDate()}</Date>
        </> :
        <Date>{props.date.getDate()}</Date>
      }
    </DateLi>
  );
}

export default DateBox;

問題部分

DateBoxコンポーネントのprops.date.getDate()の値が全て5になってしまいます。

Appコンポーネントのdays.push(<DateBox topDays="true" week={weeks[i]} date={startDate} />);の部分のdate={startDate}をdate={startDate}に変更し、
DateBoxコンポーネントの props.date.getDate() をprops.dateに変更すると意図した値に表示されますが、Dateオブジェクトをpropsとして渡したいため、困っています。

Answer 1

startDate.setDateは、Dateオブジェクトを破壊的に変更します。同じDateオブジェクトをすべてのDateBoxへ供給している形となっています。

ループ1回毎にnew Dateで新しいDateオブジェクトを作り、それを渡しましょう。

Comments

[maisumakun]

> Dateオブジェクトをpropsとして渡したいため、困っています。

このように「うっかり破壊的に変更してしまう」ような状況であれば、Dateとして渡さないほうがいいかもしれません。propとしては文字列で渡して、コンポーネント内部で必要に応じてnew Dateを行ったほうが、不意に破壊的変更をするリスクも減り安全です。