0

日付ピッカーの最小値と最大値の日付を設定しているときに、最大呼び出しスタック サイズを超えた問題に直面しています。私は2つの日付ピッカーを持っています(開始日、終了日)。開始日を選択しているときは、終了日ピッカーの最小日付を設定しています。終了日を選択しているときは、開始日ピッカーの最大日付を設定しています。

同じためのサンドボックスを提供します。

コード サンドボックスの例

以下に、同じコードを提供しています。

Flatpickr コンポーネント

import React, {Component} from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.min.css';
import 'flatpickr/dist/themes/light.css';

export default class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.setDate = this.setDate.bind(this);
    this.setDatePickerProps = this.setDatePickerProps.bind(this);

    this.state = {
      selectValue: props.selectValue ? props.selectValue : "",
      options: props.options ? props.options : {},
      placeholder: props.placeholder ? props.placeholder : {}
    };
  }

  componentWillReceiveProps(newProps){
    this.setState({
      selectValue: newProps.selectValue ? newProps.selectValue : "",
      options: newProps.options ? newProps.options : {},
      placeholder: newProps.placeholder ? newProps.placeholder : {}
        });
  }

  setDatePickerProps(propKey, propValue){
    this.refs.refDatePicker.flatpickr.set(propKey, propValue);
  }

  clearDate(){
    this.refs.refDatePicker.flatpickr.clear();
  }

  setDate(newValue){
    this.setState({
             selectValue: newValue ? newValue : ""
        });
    if(this.props.onChange){
      this.props.onChange(newValue);
    }
  }

  render(){
    return (
      <Flatpickr className="form-control clickable" ref="refDatePicker" placeholder={this.state.placeholder} options={this.state.options} value={this.state.selectValue} onValueUpdate={this.setDate} />
    );
  }
}

以下は、親コンポーネントに最小日付と最大日付を設定するためのコードです。

onFilterDateChange(str, date){
    if(str === "start"){
      this.refEndDatePicker.setDatePickerProps("minDate", date[0] ? date[0] : "");
      this.setState({
        objSearch: Object.assign({},this.state.objSearch,{ startDate: date[0] ? date[0] : ""})
      });
    }
    else if(str === "end"){
      this.refStartDatePicker.setDatePickerProps("maxDate", date[0] ? date[0] : "");
      this.setState({
        objSearch: Object.assign({},this.state.objSearch,{ endDate: date[0] ? date[0] : ""})
      });
    }
  }

開始日を選択するとすべて正常に動作しますが、その後終了日を選択するとすぐに、「RangeError: Maximum call stack size exceeded」というエラーが表示されます。

環境情報

使用した flatpickr バージョン: 3.6.4

ブラウザ名とバージョン: Chrome、バージョン 70.0.3538.110 (公式ビルド) (64 ビット)

OSとバージョン: Windows 10 Pro

4

0 に答える 0