fix: ConfigProvider rerender unexpectedly when switching some language (#31630)

* fix: ConfigProvide could not maintain the state of components when switching some lang

close #31592

* chore: add test case

* Update components/config-provider/index.tsx

Co-authored-by: afc163 <afc163@gmail.com>

* chore: fix checks

Co-authored-by: afc163 <afc163@gmail.com>

components/config-provider/__tests__/locale.test.js

@@ -5,6 +5,9 @@ import LocaleProvider from '../../locale-provider';
 import zhCN from '../../locale/zh_CN';
 import enUS from '../../locale/en_US';
 import TimePicker from '../../time-picker';
+import DatePicker from '../../date-picker';
+import { openPicker, selectCell, closePicker } from '../../date-picker/__tests__/utils';
+import Pagination from '../../pagination';
 import Modal from '../../modal';
 
 describe('ConfigProvider.Locale', () => {
@@ -64,6 +67,51 @@ describe('ConfigProvider.Locale', () => {
     expect($$('.ant-btn-primary')[0].textContent).toBe('OK');
   });
 
+  // https://github.com/ant-design/ant-design/issues/31592
+  it('should not reset the component state when switching locale', () => {
+    class App extends React.Component {
+      state = {
+        locale: zhCN,
+      };
+
+      render() {
+        return (
+          <ConfigProvider locale={this.state.locale}>
+            <DatePicker />
+            <Pagination total={50} />
+          </ConfigProvider>
+        );
+      }
+    }
+
+    const wrapper = mount(<App />);
+
+    const datepickerInitProps = wrapper.find('.ant-picker-input input').props();
+    expect(datepickerInitProps.value).toBe('');
+    expect(datepickerInitProps.placeholder).toBe('请选择日期');
+    expect(wrapper.find('.ant-pagination-item-1').props().className).toContain(
+      'ant-pagination-item-active',
+    );
+
+    openPicker(wrapper);
+    selectCell(wrapper, 10);
+    closePicker(wrapper);
+
+    expect(wrapper.find('.ant-picker-input input').props().value).not.toBe('');
+
+    wrapper.setState({ locale: {} });
+    wrapper.find('.ant-pagination-item-3').simulate('click');
+
+    const datepickerProps = wrapper.find('.ant-picker-input input').props();
+    expect(datepickerProps.placeholder).not.toBe('请选择日期');
+    expect(datepickerProps.value).not.toBe('');
+    expect(datepickerProps.value).toContain('-10');
+
+    expect(wrapper.find('.ant-pagination-item-3').props().className).toContain(
+      'ant-pagination-item-active',
+    );
+  });
+
   describe('support legacy LocaleProvider', () => {
     function testLocale(wrapper) {
       expect(wrapper.find('input').props().placeholder).toBe(zhCN.TimePicker.placeholder);

components/config-provider/index.tsx

@@ -17,6 +17,7 @@ import SizeContext, { SizeContextProvider, SizeType } from './SizeContext';
 import message from '../message';
 import notification from '../notification';
 import { RequiredMark } from '../form/Form';
+import defaultLocale from '../locale/default';
 
 export {
   RenderEmptyHandler,
@@ -187,16 +188,18 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
     },
   );
 
-  const memoIconContextValue = React.useMemo(() => ({ prefixCls: iconPrefixCls, csp }), [
-    iconPrefixCls,
-  ]);
+  const memoIconContextValue = React.useMemo(
+    () => ({ prefixCls: iconPrefixCls, csp }),
+    [iconPrefixCls],
+  );
 
   let childNode = children;
   // Additional Form provider
   let validateMessages: ValidateMessages = {};
 
-  if (locale && locale.Form && locale.Form.defaultValidateMessages) {
-    validateMessages = locale.Form.defaultValidateMessages;
+  if (locale) {
+    validateMessages =
+      locale.Form?.defaultValidateMessages || defaultLocale.Form?.defaultValidateMessages || {};
   }
   if (form && form.validateMessages) {
     validateMessages = { ...validateMessages, ...form.validateMessages };