componentDidUpdate 是否有更好的替代方法来从日期选择器获取选定日期并将其发送到 API？

Question

我正在为日期选择器使用 react-dates，当用户更改日期时，它会更新一个道具并将其发送到后端以运行作为查询中的参数以获得特定结果那天从数据库中。它看起来像这样：

    class TableComponent extends Component {
    constructor(props) {
    super(props);

    this.columnDefs = columnDefs;
    this.state = {
      isLoading: true,
      showTimeoutPopup: false,
      tableData: [],
      currentDate: this.props.currentDate
     };
    }

    componentDidMount() {
       this.fetchData();
     }

    componentDidUpdate(prevProps) {
      if (`${this.props.currentDate}` !== prevProps.currentDate) {
        this.fetchData(this.props.currentDate);
      }
    }

    fetchData() {
      this.setState({
        isLoading: true
      });

    someApi.getData(this.props.currentDate).then(tableData => this.setState({
      tableData: tableData,
      isLoading: false
    }))
      .catch(error => {
        if (error.message === 'timeout') {
          this.setState({
            showTimeoutPopup: true
          });
        } else {
          throw new Error(error.message);
        }
      });
    }

这在使用日期选择器 select 使用 UI 的日期时有效。当我尝试输入日期时，它崩溃了，因为当我输入第一个数字时，比如 12/23/2019 的月份，它会在 API 请求中发送该 1，但由于它不是有效日期而失败.但是，如果我粘贴整个日期，它将正常工作，因为它正在获得正确的日期。是否有更好的替代 componentDidUpdate 或更好的方法来构造此类请求？我需要它等到输入整个日期后再发送请求。我也不一定想要单击按钮，我希望它在日期选择器的文本框中完成所有这些操作。如果重要的是日期选择器组件：

  class DatePicker extends Component {
    constructor(props) {
      super(props);
      this.state = {
        currentDate: this.props.currentDate,
        focused: false
      };
    }

    componentDidUpdate(prevProps) {
      if (prevProps.currentDate !== this.props.currentDate) {
        this.setState({currentDate: this.props.currentDate});
      }
    }

    render() {
      return (
        <div className="form-group">
          <label className="tuxedo_label">Select or enter a date to view error reports for that 
           day</label>
          <div className="input_feedback">Dates should be in the format MM/DD/YYYY</div>
          <SingleDatePicker
            date={this.state.currentDate}
            id="date_id"
            customInputIcon={
              <i className="icon calendar-o blue">
                <span className="sr-only">open calendar</span>
              </i>
            }
            displayFormat="MM/DD/YYYY"
            numberOfMonths={1}
            isOutsideRange={() => false}
           onDateChange={this.props.onDateChange}
            focused={this.state.focused}
            onFocusChange={({ focused }) => this.setState({ focused: focused })}
          />
        </div>
      );
    }
  }

Answer 1

用moment来验证

npm install moment --save

import moment from 'moment';

componentDidUpdate(prevProps) {
      if (`${this.props.currentDate}` !== prevProps.currentDate && moment(this.props.currentDate).isValid()) {
          this.fetchData(this.props.currentDate);
      }
}

componentDidUpdate 是否有更好的替代方法来从日期选择器获取选定日期并将其发送到 API？

Is there a better alternative to componentDidUpdate for getting the selected date from a date picker and sending that in API?

javascript

api

reactjs

react-dates