docs(useSetState): more detailed demo and api docs (#2087)

* docs(useSetState): more detail api docs * docs: more detail demo * docs: add genericity to api
alibaba · Mar 6, 2023 · e6dbe4c · e6dbe4c
1 parent 1593794
commit e6dbe4c
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 11 deletions.
diff --git a/packages/hooks/src/useSetState/demo/demo1.tsx b/packages/hooks/src/useSetState/demo/demo1.tsx
@@ -1,16 +1,22 @@
+/**
+ * title: Default usage
+ * desc: Automatically merge object.
+ *
+ * title.zh-CN: 基础用法
+ * desc.zh-CN: 自动合并对象。
+ */
+
 import React from 'react';
 import { useSetState } from 'ahooks';
 
 interface State {
   hello: string;
-  count: number;
   [key: string]: any;
 }
 
 export default () => {
   const [state, setState] = useSetState<State>({
     hello: '',
-    count: 0,
   });
 
   return (
@@ -23,9 +29,6 @@ export default () => {
         <button type="button" onClick={() => setState({ foo: 'bar' })} style={{ margin: '0 8px' }}>
           set foo
         </button>
-        <button type="button" onClick={() => setState((prev) => ({ count: prev.count + 1 }))}>
-          count + 1
-        </button>
       </p>
     </div>
   );

diff --git a/packages/hooks/src/useSetState/demo/demo2.tsx b/packages/hooks/src/useSetState/demo/demo2.tsx
@@ -0,0 +1,33 @@
+/**
+ * title: Updating with callback
+ * desc: When using the callback to update, the previous state can be received, and the return value will be automatically merged.
+ *
+ * title.zh-CN: 使用回调更新
+ * desc.zh-CN: 通过回调进行更新，可以获取上一次的状态，并且也会自动合并返回的对象。
+ */
+
+import React from 'react';
+import { useSetState } from 'ahooks';
+
+interface State {
+  hello: string;
+  count: number;
+}
+
+export default () => {
+  const [state, setState] = useSetState<State>({
+    hello: 'world',
+    count: 0,
+  });
+
+  return (
+    <div>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <p>
+        <button type="button" onClick={() => setState((prev) => ({ count: prev.count + 1 }))}>
+          count + 1
+        </button>
+      </p>
+    </div>
+  );
+};
diff --git a/packages/hooks/src/useSetState/index.en-US.md b/packages/hooks/src/useSetState/index.en-US.md
@@ -13,10 +13,25 @@ useSetState works similar to `this.setState` of class component, used to manage
 
 <code src="./demo/demo1.tsx" />
 
+### Updating with callback
+
+<code src="./demo/demo2.tsx" />
+
 ## API
 
 ```typescript
-const [state, setState] = useSetState<T extends Record<string, any>>(
-  initialState: T = {} as T
-): [T, (patch: Partial<T> | ((prevState: T) => Partial<T>)) => void]
+const [state, setState] = useSetState<T>(initialState);
 ```
+
+### Result
+
+| Property | Description          | Type                                                                                      | Default |
+| -------- | -------------------- | ----------------------------------------------------------------------------------------- | ------- |
+| state    | Current state        | `T`                                                                                       | -       |
+| setState | Update current state | `(state: Partial<T> \| null) => void` \| `((prevState: T) => Partial<T> \| null) => void` | -       |
+
+### Params
+
+| Property     | Description   | Type           | Default |
+| ------------ | ------------- | -------------- | ------- |
+| initialState | Initial state | `T \| () => T` | -       |
diff --git a/packages/hooks/src/useSetState/index.zh-CN.md b/packages/hooks/src/useSetState/index.zh-CN.md
@@ -13,10 +13,25 @@ nav:
 
 <code src="./demo/demo1.tsx" />
 
+### 使用回调更新
+
+<code src="./demo/demo2.tsx" />
+
 ## API
 
 ```typescript
-const [state, setState] = useSetState<T extends Record<string, any>>(
-  initialState: T = {} as T
-): [T, (patch: Partial<T> | ((prevState: T) => Partial<T>)) => void]
+const [state, setState] = useSetState<T>(initialState);
 ```
+
+### Result
+
+| 参数     | 说明         | 类型                                                                                      | 默认值 |
+| -------- | ------------ | ----------------------------------------------------------------------------------------- | ------ |
+| state    | 当前状态     | `T`                                                                                       | -      |
+| setState | 设置当前状态 | `(state: Partial<T> \| null) => void` \| `((prevState: T) => Partial<T> \| null) => void` | -      |
+
+### Params
+
+| 参数         | 说明     | 类型           | 默认值 |
+| ------------ | -------- | -------------- | ------ |
+| initialState | 初始状态 | `T \| () => T` | -      |