reactでsetStateしてもreloadするまで状態が更新されない

Question

前提・実現したいこと

reactでsetStateしてもreloadするまで状態が更新されない問題に、一週間以上悩まされています。

時間経過でthis.state.nameの情報を更新したいのですが、設定した時間の経過後も表示されるthis.state.nameは変わらず、ブラウザを更新するとthis.state.nameが「変わった」になります。

なぜ状態が更新されないのでしょうか？
以下、codesandboxのコードです。
this.state.endを現在時刻から数秒後に設定してお試しください。

https://codesandbox.io/s/infallible-pond-y8uge?fontsize=14&hidenavigation=1&theme=dark

該当のソースコード

import React from "react";
import dateToFormatString from './Datefmt';


export default class Human extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "変わる前",
            end: "2020-11-25T23:01:00",
        };
    }

    render() {
        const date = dateToFormatString(new Date(), '%YYYY%-%MM%-%DD%T%HH%:%mm%:%ss%');

        if (this.state.name !== "変わった") {
            if (this.state.end < date) {
                this.setState({name: "変わった"});
            }
        }

        return (
            <>
                <h1>{this.state.name}</h1>
                {date}
            </>
        )
    }
}

Answer 1

render()はざっくり書くとprops,stateが変化した時に再度呼ばれます。

しかし、時刻比較用のdateはrender()内の処理上で生成されているもので、
次にrender()を実行する条件を満たさないと変化しません。

このクラス内で完結されるケースだと、以下のような実装で一応実現できます。

このサイトの説明をまるまる利用した例

import React from "react";

import dateToFormatString from "./Datefmt";
import Clock from "./Clock";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "変わる前",
+      date: new Date(),
      end: "2020-11-25T23:55:00"
    };
  }

+  componentDidMount() {
+    this.intervalId = setInterval(() => {
+      this.setState({
+        date: new Date()
+      });
+    }, 1000);
+  }

+  componentWillUnmount() {
+    clearInterval(this.intervalId);
+  }

  render() {
-    const date = dateToFormatString(new Date(), '%YYYY%-%MM%-%DD%T%HH%:%mm%:%ss%');
+    const date = dateToFormatString(this.state.date,"%YYYY%-%MM%-%DD%T%HH%:%mm%:%ss%");

    if (this.state.name !== "変わった") {
      if (this.state.end < date) {
        this.setState({ name: "変わった" });
      }
    }

    return (
      <>
        <Clock />
        <h1>{this.state.name}</h1>
        {date}
      </>
    );
  }
}

Comments

[sarachst]

Dateの比較自体は通っていて全く気にしていなかったので、目から鱗が落ちるような思いです。自力では解決できなかったと思うので本当に助かりました。ありがとうございます！