Question

免责声明：我正在使用带有Typescript的React。
我有一个组件，该组件在挂载时会设置日期，例如：

apt install default-jre被解雇后，如果需要，我会尝试再次尝试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 }); } }中）之后，我可以在React DevTools（适用于Chrome）中看到fromDate已更改，但以下DateTimePicker组件未重新呈现：

fromDate

再次查看React DevTools，我可以确定我的主要组件状态已经确定，但是DateTimePicker尚未从状态接收到新的componentDidMount()。
有谁知道为什么不重新渲染？
谢谢！

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)}
/>

状态为“日期”的React组件未重新渲染

1 个答案: