Я использую даты реакции для средства выбора даты, которое, когда пользователь изменяет дату, обновляет реквизит и отправляет его бэкэнду для запуска в качестве параметра в запросе, чтобы получить конкретные результаты для этого дня из базы данных. Это выглядит так:

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 ={amp}gt; this.setState({ tableData: tableData, isLoading: false })) .catch(error ={amp}gt; { if (error.message === 'timeout') { this.setState({ showTimeoutPopup: true }); } else { throw new Error(error.message); } }); } 

Это работает при использовании выбора даты для выбора даты с помощью пользовательского интерфейса. Когда я пытаюсь ввести дату, происходит сбой, потому что, когда я вводю первую цифру, скажем, 1 за месяц от 23.12.2009, она отправляет эту 1 в запросе API, который не выполняется, поскольку не является допустимой датой. Однако, если я вставлю всю дату, она будет работать, так как она получает правильную дату. Есть ли лучшая альтернатива componentDidUpdate или лучший способ структурировать этот тип запроса? Мне нужно дождаться полной даты, прежде чем отправлять запрос. Я также не хочу, чтобы кнопка была нажата, я бы хотел, чтобы все это происходило в текстовом поле выбора даты. Если это имеет значение, вот компонент datepicker:

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

использовать момент для проверки

 npm install moment --save import moment from 'moment'; componentDidUpdate(prevProps) { if (`${this.props.currentDate}` !== prevProps.currentDate {amp}amp;{amp}amp; moment(this.props.currentDate).isValid()) { this.fetchData(this.props.currentDate); } } 
Бабак Ягхуби

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,