fix: Table empty filters throw warning (#26001)

close #25979
ant-design · Aug 4, 2020 · 8d7cbbd · 8d7cbbd
1 parent c4418d0
commit 8d7cbbd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
@@ -82,16 +82,23 @@ describe('Table.filter', () => {
   });
 
   it('renders empty menu correctly', () => {
-    const wrapper = mount(createTable({
-      columns: [
-        {
-          ...column,
-          filters: [],
-        },
-      ],
-    }));
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    const wrapper = mount(
+      createTable({
+        columns: [
+          {
+            ...column,
+            filters: [],
+          },
+        ],
+      }),
+    );
     wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
     expect(wrapper.find('Empty').length).toBe(1);
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalled();
+    // eslint-disable-next-line no-console
+    console.error.mockRestore();
   });
 
   it('renders radio filter correctly', () => {

diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -34,17 +34,21 @@ function renderFilterItems({
   locale: TableLocale;
 }) {
   if (filters.length === 0) {
+    // wrapped with <></> to avoid react warning
+    // https://github.com/ant-design/ant-design/issues/25979
     return (
-      <Empty
-        image={Empty.PRESENTED_IMAGE_SIMPLE}
-        description={locale.filterEmptyText}
-        style={{
-          margin: '16px 0',
-        }}
-        imageStyle={{
-          height: 24,
-        }}
-      />
+      <>
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={locale.filterEmptyText}
+          style={{
+            margin: '16px 0',
+          }}
+          imageStyle={{
+            height: 24,
+          }}
+        />
+      </>
     );
   }
   return filters.map((filter, index) => {