fix: Space duplicated key warning (#35311)

close #35305

components/space/__tests__/index.test.js

@@ -172,4 +172,25 @@ describe('Space', () => {
 
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/35305
+  it('should not throw duplicated key warning', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    mount(
+      <Space>
+        <div key="1" />
+        <div />
+        <div key="3" />
+        <div />
+      </Space>,
+    );
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalledWith(
+      expect.stringContaining('Encountered two children with the same key'),
+      expect.anything(),
+      expect.anything(),
+    );
+    // eslint-disable-next-line no-console
+    console.error.mockRestore();
+  });
 });

components/space/index.tsx

@@ -89,11 +89,14 @@ const Space: React.FC<SpaceProps> = props => {
     }
 
     const keyOfChild = child && child.key;
+    // Add `-space-item` as suffix in case simple key string trigger duplicated key warning
+    // https://github.com/ant-design/ant-design/issues/35305
+    const defaultKey = `${i}-space-item`;
 
     return (
       <Item
         className={itemClassName}
-        key={`${itemClassName}-${keyOfChild || i}`}
+        key={`${itemClassName}-${keyOfChild || defaultKey}`}
         direction={direction}
         index={i}
         marginDirection={marginDirection}