fix: update useList (#374)

* fix: update useList

* feat(uselist): add mutate demo for functional or merge

* fix(uselist): update autofix to sort these imports

Author: LuckyFBB

src/useList/demos/mutate.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Button, Form, Input, Result, Select, Table } from 'antd';
+import { useList } from 'dt-react-component';
+import type { Fetcher } from 'dt-react-component/useList';
+
+import getMockData, { type MockData } from './data';
+
+const fetcher: Fetcher<MockData, { current: number; pageSize: number; search?: string }> = (
+    params
+) => {
+    return new Promise<{
+        data: MockData[];
+        total: number;
+    }>((resolve) => {
+        setTimeout(() => {
+            resolve(getMockData(params));
+        }, 150);
+    });
+};
+
+export default () => {
+    const { error, params, loading, data, mutate } = useList(fetcher, { current: 1, pageSize: 20 });
+    const [form] = Form.useForm();
+
+    if (error) return <Result status={500} />;
+
+    const handleSearch = async () => {
+        const values = await form.validateFields();
+        mutate({ ...values });
+    };
+
+    const handleReset = async () => {
+        form.resetFields();
+        const values = await form.validateFields();
+        // 当传入值有 undefined 的时候，采用 functional 的写法。
+        // 因为底层使用的 lodash 的 merge，采用赋值写法不会对 undefined 做合并
+        mutate((pre) => ({ ...pre, ...values }));
+    };
+
+    return (
+        <>
+            <Form layout="inline" form={form}>
+                <Form.Item name="search">
+                    <Input.Search style={{ marginBottom: 12, width: 228 }} />
+                </Form.Item>
+                <Form.Item name="filters">
+                    <Select style={{ width: 228 }} mode="multiple">
+                        <Select.Option key="female" value="female">
+                            female
+                        </Select.Option>
+                        <Select.Option key="male" value="male">
+                            male
+                        </Select.Option>
+                    </Select>
+                </Form.Item>
+                <Button type="ghost" style={{ marginRight: 16 }} onClick={handleReset}>
+                    重置
+                </Button>
+                <Button type="primary" onClick={handleSearch}>
+                    查询
+                </Button>
+            </Form>
+            <Table
+                loading={loading}
+                columns={[
+                    {
+                        key: 'name',
+                        title: 'name',
+                        dataIndex: 'name',
+                    },
+                    {
+                        key: 'address',
+                        title: 'address',
+                        dataIndex: 'address',
+                    },
+                    {
+                        key: 'company',
+                        title: 'company',
+                        dataIndex: 'company',
+                    },
+                    {
+                        key: 'gender',
+                        title: 'gender',
+                        dataIndex: 'gender',
+                    },
+                    {
+                        key: 'weight',
+                        title: 'weight',
+                        dataIndex: 'weight',
+                    },
+                ]}
+                onChange={(pagination) =>
+                    mutate({ current: pagination.current, pageSize: pagination.pageSize })
+                }
+                size="small"
+                scroll={{ y: 200 }}
+                dataSource={data}
+                pagination={{
+                    current: params.current,
+                    pageSize: params.pageSize,
+                    total: params.total,
+                }}
+                rowKey="uuid"
+                bordered
+            />
+        </>
+    );
+};

src/useList/index.md

@@ -15,6 +15,7 @@ toc: content
 <code src="./demos/basic.tsx" title="基础使用"></code>
 <code src="./demos/sort.tsx" title="筛选和过滤"></code>
 <code src="./demos/options.tsx" title="相关配置" description="设置 immediate 值防止初始化的时候进行请求"></code>
+<code src="./demos/mutate.tsx" title="相关配置" description="用 undefined 覆盖 prevPrams 时，需采用 functional 的写法 "></code>
 
 ## API
 

src/useList/index.ts

@@ -49,23 +49,11 @@ export default function useList<T extends Record<string, any>, P extends Record<
         };
         const nextOptions = merge(defaultOptions, options);
 
-        if (typeof next === 'function') {
-            setParams((prev) => {
-                const tmp = next(prev);
+        const tmp = typeof next === 'function' ? next(params) : { ...merge({}, params, next) };
+        setParams(tmp);
 
-                if (nextOptions.revalidate) {
-                    performFetch(tmp);
-                }
-
-                return tmp;
-            });
-        } else {
-            const tmp = { ...merge({}, params, next) };
-            setParams(tmp);
-
-            if (nextOptions.revalidate) {
-                performFetch(tmp);
-            }
+        if (nextOptions.revalidate) {
+            performFetch(tmp);
         }
     };