警告：提供给`DateRangePicker`的`function`类型的无效道具`reopenPickerOnClearDates`，预期为布尔值

如何解决警告：提供给`DateRangePicker`的`function`类型的无效道具`reopenPickerOnClearDates`，预期为布尔值

我正在使用反应16.13.1和反应日期21.8.0。 我遇到了DaterangePicker组件的问题（SingleDatePicker正常工作）

我按如下方式使用它：

<DaterangePicker
    // startDate={this.props.filters.startDate}
    endDate={this.props.filters.endDate}
    onDatesChange={this.onDatesChange}
    focusedInput={this.state.focused}
    endDateId="your_unique_end_date_id" // PropTypes.string.isrequired,startDateId="your_unique_start_date_id" // PropTypes.string.isrequired,onFocusChange={this.onFocusChange}
    showClearDates={true}
    numberOfMonths={1}
    isOutsideRange={() => false}
    regular = {()=> true}
    reopenPickerOnClearDates= {()=>true}
/>

和完整的组件：

Filter.js

class ExpenseListFilters extends React.Component{
    state = {
        focused:null
    }

    onDatesChange = ({ startDate,endDate }) => {
        this.props.dispatch(setStartDate(startDate));
        this.props.dispatch(setEndDate(endDate));
    };
    onFocusChange = (focused) => {
        console.log('focused')
        this.setState(() => ({ focused }));
    }
    render(){
        return (
            <form className={'form-inline'}>
            <input name='filter' type="text" className={'expense-filter'} value={this.props.filters.text}
            onChange={(e) => {
                this.props.dispatch(setTextFilter(e.target.value));
            }}/>
            <div className="form-group">
            <select value={this.props.filters.sortBy} className="custom-select"
                onChange={(e) => {
                    if (e.target.value === 'date') {
                        this.props.dispatch(sortByDate());
                    } else if (e.target.value === 'amount') {
                        this.props.dispatch(sortByAmount());
                    }
                }}>
                <option value="date">Date</option>
                <option value="amount">Amount</option>
            </select>
                <DaterangePicker
                    // startDate={this.props.filters.startDate}
                    endDate={this.props.filters.endDate}
                    onDatesChange={this.onDatesChange}
                    focusedInput={this.state.focused}
                    endDateId="your_unique_end_date_id" // PropTypes.string.isrequired,onFocusChange={this.onFocusChange}
                    showClearDates={true}
                    numberOfMonths={1}
                    isOutsideRange={() => false}
                    regular = {()=> true}
                    reopenPickerOnClearDates= {()=>true}
                />
            </div>
            </form>

        )
    }
}


const mapStatetoProps = (state) => {
    return {
        filters: state.filters
    };
};
export default connect(mapStatetoProps)(ExpenseListFilters)

我在控制台上收到了一些警告：

index.js:1 Warning: Failed prop type: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DaterangePicker`,expected `boolean`.

这是完整的警告信息：

index.js:1 Warning: Failed prop type: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DaterangePicker`,expected `boolean`.
    in DaterangePicker (at ExpenseListFilters.js:42)
    in ExpenseListFilters (created by ConnectFunction)
    in ConnectFunction (at ExpenseDashboard.js:8)
    in div (at ExpenseDashboard.js:7)
    in ExpenseDashboard (created by Context.Consumer)
    in Route (at AppRouter.js:44)
    in Switch (at AppRouter.js:43)
    in div (at AppRouter.js:11)
    in Router (created by browserRouter)
    in browserRouter (at AppRouter.js:10)
    in AppRouter (at App.js:13)
    in Provider (at App.js:12)
    in App (at src/index.js:16)
    in StrictMode (at src/index.js:15)
console.<computed>  @   index.js:1
printWarning    @   checkPropTypes.js:20
checkPropTypes  @   checkPropTypes.js:82
validatePropTypes   @   react.development.js:1714
createElementWithValidation @   react.development.js:1813
render  @   ExpenseListFilters.js:40
finishClassComponent    @   react-dom.development.js:17160
updateClassComponent    @   react-dom.development.js:17110
beginWork   @   react-dom.development.js:18620
beginWork$1 @   react-dom.development.js:23179
performunitOfWork   @   react-dom.development.js:22154
workLoopSync    @   react-dom.development.js:22130
performSyncWorkOnRoot   @   react-dom.development.js:21756
scheduleUpdateOnFiber   @   react-dom.development.js:21188
updateContainer @   react-dom.development.js:24373
(anonymous) @   react-dom.development.js:24758
unbatchedUpdates    @   react-dom.development.js:21903
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:24757
render  @   react-dom.development.js:24840
./src/index.js  @   index.js:14
__webpack_require__ @   bootstrap:784
fn  @   bootstrap:150
1   @   configureStore.js:17
__webpack_require__ @   bootstrap:784
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.chunk.js:1
index.js:1 Warning: Failed prop type: DaterangePicker: unkNown props found: regular
    in DaterangePicker (at ExpenseListFilters.js:42)
    in ExpenseListFilters (created by ConnectFunction)
    in ConnectFunction (at ExpenseDashboard.js:8)
    in div (at ExpenseDashboard.js:7)
    in ExpenseDashboard (created by Context.Consumer)
    in Route (at AppRouter.js:44)
    in Switch (at AppRouter.js:43)
    in div (at AppRouter.js:11)
    in Router (created by browserRouter)
    in browserRouter (at AppRouter.js:10)
    in AppRouter (at App.js:13)
    in Provider (at App.js:12)
    in App (at src/index.js:16)
    in StrictMode (at src/index.js:15)
console.<computed>  @   index.js:1
printWarning    @   checkPropTypes.js:20
checkPropTypes  @   checkPropTypes.js:82
validatePropTypes   @   react.development.js:1714
createElementWithValidation @   react.development.js:1813
render  @   ExpenseListFilters.js:40
finishClassComponent    @   react-dom.development.js:17160
updateClassComponent    @   react-dom.development.js:17110
beginWork   @   react-dom.development.js:18620
beginWork$1 @   react-dom.development.js:23179
performunitOfWork   @   react-dom.development.js:22154
workLoopSync    @   react-dom.development.js:22130
performSyncWorkOnRoot   @   react-dom.development.js:21756
scheduleUpdateOnFiber   @   react-dom.development.js:21188
updateContainer @   react-dom.development.js:24373
(anonymous) @   react-dom.development.js:24758
unbatchedUpdates    @   react-dom.development.js:21903
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:24757
render  @   react-dom.development.js:24840
./src/index.js  @   index.js:14
__webpack_require__ @   bootstrap:784
fn  @   bootstrap:150
1   @   configureStore.js:17
__webpack_require__ @   bootstrap:784
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.chunk.js:1
index.js:1 Warning: Failed prop type: Invalid prop `reopenPickerOnClearDates` of type `function` supplied to `DaterangePickerInputController`,expected `boolean`.
    in DaterangePickerInputController (created by DaterangePicker)
    in DaterangePicker (at ExpenseListFilters.js:42)
    in div (at ExpenseListFilters.js:30)
    in form (at ExpenseListFilters.js:25)
    in ExpenseListFilters (created by ConnectFunction)
    in ConnectFunction (at ExpenseDashboard.js:8)
    in div (at ExpenseDashboard.js:7)
    in ExpenseDashboard (created by Context.Consumer)
    in Route (at AppRouter.js:44)
    in Switch (at AppRouter.js:43)
    in div (at AppRouter.js:11)
    in Router (created by browserRouter)
    in browserRouter (at AppRouter.js:10)
    in AppRouter (at App.js:13)
    in Provider (at App.js:12)
    in App (at src/index.js:16)
    in StrictMode (at src/index.js:15)
console.<computed>  @   index.js:1
printWarning    @   checkPropTypes.js:20
checkPropTypes  @   checkPropTypes.js:82
validatePropTypes   @   react.development.js:1714
createElementWithValidation @   react.development.js:1813
render  @   DaterangePicker.js:884
finishClassComponent    @   react-dom.development.js:17160
updateClassComponent    @   react-dom.development.js:17110
beginWork   @   react-dom.development.js:18620
beginWork$1 @   react-dom.development.js:23179
performunitOfWork   @   react-dom.development.js:22154
workLoopSync    @   react-dom.development.js:22130
performSyncWorkOnRoot   @   react-dom.development.js:21756
scheduleUpdateOnFiber   @   react-dom.development.js:21188
updateContainer @   react-dom.development.js:24373
(anonymous) @   react-dom.development.js:24758
unbatchedUpdates    @   react-dom.development.js:21903
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:24757
render  @   react-dom.development.js:24840
./src/index.js  @   index.js:14
__webpack_require__ @   bootstrap:784
fn  @   bootstrap:150
1   @   configureStore.js:17
__webpack_require__ @   bootstrap:784
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.chunk.js:1

任何帮助或建议将不胜感激！谢谢你

解决方法

我遇到了同样的问题，但是遵循作者的包装器示例为我解决了这个问题。尝试添加需要首先定义的未定义道具时会发生这种情况。 https://github.com/airbnb/react-dates/blob/master/examples/DateRangePickerWrapper.jsx