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

时间：2020-10-12 18:05:29

标签： reactjs react-dates

我正在使用反应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,
                    startDateId="your_unique_start_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

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

1 个答案:

答案 0 :(得分：0)

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

相关问题
最新问题