diff --git a/packages/hooks/src/useSetState/demo/demo1.tsx b/packages/hooks/src/useSetState/demo/demo1.tsx index 51b16632a2..4c593831a5 100644 --- 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({ hello: '', - count: 0, }); return ( @@ -23,9 +29,6 @@ export default () => { -

); diff --git a/packages/hooks/src/useSetState/demo/demo2.tsx b/packages/hooks/src/useSetState/demo/demo2.tsx new file mode 100644 index 0000000000..0318ac9113 --- /dev/null +++ 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({ + hello: 'world', + count: 0, + }); + + return ( +
+
{JSON.stringify(state, null, 2)}
+

+ +

+
+ ); +}; diff --git a/packages/hooks/src/useSetState/index.en-US.md b/packages/hooks/src/useSetState/index.en-US.md index a09dee549f..6bfbf2d2f7 100644 --- 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 +### Updating with callback + + + ## API ```typescript -const [state, setState] = useSetState>( - initialState: T = {} as T -): [T, (patch: Partial | ((prevState: T) => Partial)) => void] +const [state, setState] = useSetState(initialState); ``` + +### Result + +| Property | Description | Type | Default | +| -------- | -------------------- | ----------------------------------------------------------------------------------------- | ------- | +| state | Current state | `T` | - | +| setState | Update current state | `(state: Partial \| null) => void` \| `((prevState: T) => Partial \| 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 index 5a24ee1599..c06c148b0f 100644 --- a/packages/hooks/src/useSetState/index.zh-CN.md +++ b/packages/hooks/src/useSetState/index.zh-CN.md @@ -13,10 +13,25 @@ nav: +### 使用回调更新 + + + ## API ```typescript -const [state, setState] = useSetState>( - initialState: T = {} as T -): [T, (patch: Partial | ((prevState: T) => Partial)) => void] +const [state, setState] = useSetState(initialState); ``` + +### Result + +| 参数 | 说明 | 类型 | 默认值 | +| -------- | ------------ | ----------------------------------------------------------------------------------------- | ------ | +| state | 当前状态 | `T` | - | +| setState | 设置当前状态 | `(state: Partial \| null) => void` \| `((prevState: T) => Partial \| null) => void` | - | + +### Params + +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | -------- | -------------- | ------ | +| initialState | 初始状态 | `T \| () => T` | - |