當狀態中的“日期”更新時，React 組件不會重新渲染

Question

免責聲明：我將 React 與 Typescript 一起使用。
我有一個組件，它在安裝時會用這樣的日期設置狀態：

constructor(props: SomeProps) {
    super(props);
    const fromDate = new Date();
    fromDate.setHours(fromDate.getHours() - fromDate.getUTCDate());
    fromDate.setDate(fromDate.getDate() - 1);
    this.state = {
      fromDate: fromDate,
    };
  }

當componentDidMount()被炒魷魚，我嘗試setState的fromDate再次，如果需要的話：

componentDidMount(): void {
  ...someCode
  if (someData.length > 0) {
      const fromDate = new Date(someData[someData.length - 1].timestamp);
      fromDate.setDate(fromDate.getDate() - 1);
      this.setState({
        fromDate
      });
    }
}

再次設置fromDate后（在componentDidMount() ），我可以在 React DevTools（Chrome 版）中看到 fromDate 已更改，但不會重新渲染以下 DateTimePicker 組件：

const { fromDate } = this.state;
<DateTimePicker
   value={fromDate.toISOString()}
   label="From"
   dateChangeHandler={(e: any) => this.handleChange(e)}
/>

再次查看 React DevTools，我可以看到我的主要組件狀態確實發生了變化，但是 DateTimePicker 沒有從狀態中收到新的fromDate 。
有誰知道，為什么不重新渲染？
謝謝！

Answer 1

問題可能是您將 Date() 對象存儲在狀態中，因此從技術上講狀態沒有改變， fromDate 仍然是一個對象。

你可以試試

constructor(props: SomeProps) {
    super(props);
    const fromDate = new Date();
    fromDate.setHours(fromDate.getHours() - fromDate.getUTCDate());
    fromDate.setDate(fromDate.getDate() - 1);
    this.state = {
      fromDate: fromDate.toISOString(),
    };
  }

和

componentDidMount(): void {
  ...someCode
  if (someData.length > 0) {
      const fromDate = new Date(someData[someData.length - 1].timestamp);
      fromDate.setDate(fromDate.getDate() - 1);
      this.setState({
        fromDate: fromDate.toIsoString()
      });
    }
}

然后在渲染

const { fromDate } = this.state;
<DateTimePicker
   value={fromDate}
   label="From"
   dateChangeHandler={(e: any) => this.handleChange(e)}
/>