react-datepicker报错：'addMonths'未定义，请求技术修复协助

问题原因 #

你代码里用到的addMonths不是JavaScript原生内置方法，属于第三方日期处理工具的函数，当前代码没有导入该函数，所以触发ESLint的no-undef未定义错误。

修复方案一：使用date-fns库（推荐） #

react-datepicker通常和date-fns搭配使用，步骤如下：

1. 安装date-fns（如果项目未安装）

npm install date-fns
# 或者用yarn
yarn add date-fns

2. 在组件文件顶部导入addMonths
3. 保持原有逻辑不变即可

修改后的完整代码：

import React, { useState } from 'react'
import '../../../styles/findscooterform.css';
import {Form, FormGroup} from 'reactstrap';
import DatePicker from 'react-datepicker';
// 新增导入
import { addMonths } from 'date-fns';

const FindScooterForm = () => {
    const [startDate, setStartDate] = useState(null);
  return (
    <Form className='form'>
        <div className='d-flex align-items-center justify-content-between flex-wrap'>
            <FormGroup className='form__group'>
                <DatePicker 
                    selected={startDate} 
                    onChange={(date)=> setStartDate(date)} 
                    minDate={new Date()} 
                    maxDate={addMonths(new Date(), 5)} 
                    showDisabledMonthNavigation 
                />
            </FormGroup>
            <FormGroup className='form__group'>
                <input className='rent__time' type='time' placeholder='Time' required />
            </FormGroup>
            <FormGroup className='select__group'>
                <select name='duration'>
                    <option value='2days'>2 Days</option>
                    <option value='3days'>3 Days</option>
                    <option value='4days'>4 Days</option>
                    <option value='5days'>5 Days</option>
                    <option value='6days'>6 Days</option>
                    <option value='1week'>1 Week</option>
                    <option value='2week'>2 Week</option>
                    <option value='3week'>3 Week</option>
                    <option value='1month'>1 Month</option>
                </select>
            </FormGroup>

            <FormGroup className='select__group'>
                <select name='pickup'>
                    <option value='selected'>Our Office</option>
                    <option value='location'>Send to my location</option>
                </select>
            </FormGroup>

            <FormGroup className='select__group'>
                <button className='btn__form-scooter'>
                    <a href=''>Find a Scooter</a>
                </button>
            </FormGroup>
        </div>
    </Form>
  )
}

export default FindScooterForm

修复方案二：自行实现addMonths函数 #

如果不想额外安装依赖，可以自己写一个简单的日期月份增加函数：

import React, { useState } from 'react'
import '../../../styles/findscooterform.css';
import {Form, FormGroup} from 'reactstrap';
import DatePicker from 'react-datepicker';

// 自定义addMonths函数
const addMonths = (date, months) => {
  const newDate = new Date(date);
  newDate.setMonth(newDate.getMonth() + months);
  return newDate;
};

const FindScooterForm = () => {
    const [startDate, setStartDate] = useState(null);
  return (
    <Form className='form'>
        <div className='d-flex align-items-center justify-content-between flex-wrap'>
            <FormGroup className='form__group'>
                <DatePicker 
                    selected={startDate} 
                    onChange={(date)=> setStartDate(date)} 
                    minDate={new Date()} 
                    maxDate={addMonths(new Date(), 5)} 
                    showDisabledMonthNavigation 
                />
            </FormGroup>
            <FormGroup className='form__group'>
                <input className='rent__time' type='time' placeholder='Time' required />
            </FormGroup>
            <FormGroup className='select__group'>
                <select name='duration'>
                    <option value='2days'>2 Days</option>
                    <option value='3days'>3 Days</option>
                    <option value='4days'>4 Days</option>
                    <option value='5days'>5 Days</option>
                    <option value='6days'>6 Days</option>
                    <option value='1week'>1 Week</option>
                    <option value='2week'>2 Week</option>
                    <option value='3week'>3 Week</option>
                    <option value='1month'>1 Month</option>
                </select>
            </FormGroup>

            <FormGroup className='select__group'>
                <select name='pickup'>
                    <option value='selected'>Our Office</option>
                    <option value='location'>Send to my location</option>
                </select>
            </FormGroup>

            <FormGroup className='select__group'>
                <button className='btn__form-scooter'>
                    <a href=''>Find a Scooter</a>
                </button>
            </FormGroup>
        </div>
    </Form>
  )
}

export default FindScooterForm

内容的提问来源于stack exchange，提问作者Team M11