React SingleDatePicker日历无法弹出及相关警告问题求助

1. 日历聚焦不弹出 #

你的代码存在两处语法/逻辑错误：

• onDateChange 方法参数名与 state 字段名不一致：参数写的是 createAt，但 state 中日期字段是 createdAt，导致状态更新失败；
• onFocusChange 里的 setState 写法错误：箭头函数返回对象时未加括号，JS 会将其识别为代码块而非对象字面量，导致 calendarFocused 状态无法更新。

修正这两处后，日历就能正常弹出。

2. componentWillReceiveProps 废弃警告 #

该警告源于你使用的 react-dates 版本依赖了已废弃的 React 生命周期方法。解决方式：

• 优先升级 react-dates 到最新稳定版（部分新版本已移除对废弃生命周期的依赖，同时可能不再需要 import 'react-dates/initialize'，需留意版本文档）；
• 若暂时无法升级，可在项目配置中忽略该特定警告（不推荐，长期建议升级）。

3. TypeScript 类型声明缺失警告 #

VSCode 的提示是因为未安装 react-dates 的类型声明包，执行以下命令安装即可：

npm install @types/react-dates --save-dev
# yarn 用户执行：
yarn add @types/react-dates --dev

修正后的完整代码 #

import React from "react";
import moment from "moment";
import 'react-dates/lib/css/_datepicker.css'
import 'react-dates/initialize';
import { SingleDatePicker } from "react-dates";

export default class ExpenseForm extends React.Component {
    state = {
        createdAt: moment(),
        calendarFocused: false
    }

    onDateChange = (createdAt) => {
        this.setState(() => ({ createdAt }))
    }

    onFocusChange = ({ focused }) => {
        this.setState(() => ({ calendarFocused: focused }))
    }

    render() {
        return (
            <div>
                <SingleDatePicker
                    date={this.state.createdAt}
                    onDateChange={this.onDateChange}
                    focused={this.state.calendarFocused}
                    onFocusChange={this.onFocusChange}
                    numberOfMonths={1}
                    isOutsideRange={() => false}
                />
                <button>Submit</button>
            </div>
        )
    }
}

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