似乎無法在React中重置組件狀態

Question

當用戶輸入無效的日期時，我正在嘗試重置react-datepicker中的日期值/文本。 這是代碼：

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: Date.now()
    };
  }

  render() {
    return (
      <DatePicker
        name="date"
        selected={this.state.date && moment(this.state.date, "x")}
        onChange={date => {
          this.setState({
            date: date.valueOf()
          });
        }}
        onBlur={e => {
          let date = moment(e.target.value, "LLL", true);
          if (date.isValid()) {
            this.setState({
              date: date.valueOf() // apply good value
            });
          } else {
            this.forceUpdate();
          }
        }}
        showTimeSelect
        timeFormat="HH:mm"
        timeIntervals={30}
        dateFormat="LLL"
        timeCaption="Time"
        minDate={moment().add(30, "minutes")}
      />
    );
  }
}

我試圖將其放入JSFiddle，但是在渲染react-datepicker組件時似乎遇到了麻煩，但是該組件在我自己的代碼中可以正常渲染。

問題似乎是forceUpdate不會觸發組件的重置。 我想知道是否重置僅發生在日歷選擇本身而不是輸入字段上（這是我要嘗試的操作）。 我嘗試添加value屬性並將其設置為與selected屬性相同的東西，但是沒有效果。 驗證可以正常進行，並且可以正常工作，但輸入字段文本上的重新呈現卻沒有。

Answer 1

如果狀態未更改，則無需強制更新組件；如果狀態更改，則無論如何將再次呈現視圖。 像這樣強制更新將不會導致渲染發生任何變化。 通常在格式化日期時，我會先檢查原始數據是否適合轉換為日期，然后再進行轉換，而無需再次檢查。