moment国际化的问题

问题

在使用antd国际化的时候，发现日期组件存在部分汉化，星期和月没有汉化

分析

• 验证国际化有没有搞错

import React, { useState } from 'react';
import { render } from 'react-dom';
import { ConfigProvider, DatePicker, message } from 'antd';
// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import zhCN from 'antd/lib/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'antd/dist/antd.css';
import './index.css';

moment.locale('zh-cn');

const App = () => {
 // ...
  return (
    <ConfigProvider locale={zhCN}>
      <div style={{ width: 400, margin: '100px auto' }}>
        <DatePicker onChange={handleChange} />
        <div style={{ marginTop: 16 }}>
          当前日期：{date ? date.format('YYYY年MM月DD日') : '未选择'}
        </div>
      </div>
    </ConfigProvider>
  );
};

检查没有错误

• 网上检索
  • 设置import 'moment/dist/locale/zh-cn' 没效果
  • antd日期组件datepicker设置中文月份和星期还是显示英文问题 (opens new window)
  • 搜索了相关问题，大致上是moment引发的问题

解决

• 查看moment版本 npm ls moment

─┬ @xxxx
│ └─┬ antd@4.17.2
│   ├── moment@2.29.3 deduped
│   └─┬ rc-picker@2.5.19
│     └── moment@2.29.3 deduped
└── moment@2.29.1

存在2个版本， 2.29.1 和2.29.3

• 解决方法 import moment from 'moment' 引入的外层moment，造成汉化是外层的moment， 所以antd里的moment没有汉化到

• 升级外层的moment, 这样就会共用moment包, 达到统一的效果