是否有更好的替代组件DidUpdate的方法，用于从日期选择器获取所选日期并在API中发送?

Question

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

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

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

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

使用时刻来验证

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