-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
docs(useRequest): add refreshDepsAction
options and update demo
#2334
Merged
Merged
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 15 additions & 26 deletions
41
packages/hooks/src/useRequest/doc/refreshDeps/demo/refreshDeps.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,34 @@ | ||
import React, { useState } from 'react'; | ||
import Mock from 'mockjs'; | ||
import { useRequest } from 'ahooks'; | ||
|
||
const userSchool = (id: string) => { | ||
switch (id) { | ||
case '1': | ||
return 'Tsinghua University'; | ||
case '2': | ||
return 'Beijing University'; | ||
case '3': | ||
return 'Zhejiang University'; | ||
default: | ||
return ''; | ||
} | ||
}; | ||
function getUsername(id: number): Promise<string> { | ||
console.log('use-request-refresh-deps-id', id); | ||
|
||
async function getUserSchool(userId: string): Promise<string> { | ||
return new Promise((resolve) => { | ||
setTimeout(() => { | ||
resolve(userSchool(userId)); | ||
resolve(Mock.mock('@name')); | ||
}, 1000); | ||
}); | ||
} | ||
|
||
export default () => { | ||
const [userId, setUserId] = useState('1'); | ||
const { data, loading } = useRequest(() => getUserSchool(userId), { | ||
const [userId, setUserId] = useState<number>(); | ||
const { data, loading, run } = useRequest((id: number) => getUsername(id), { | ||
refreshDeps: [userId], | ||
}); | ||
|
||
if (loading) { | ||
return <div>loading...</div>; | ||
} | ||
|
||
return ( | ||
<div> | ||
<select | ||
onChange={(e) => setUserId(e.target.value)} | ||
value={userId} | ||
style={{ marginBottom: 16, width: 120 }} | ||
> | ||
<option value="1">user 1</option> | ||
<option value="2">user 2</option> | ||
<option value="3">user 3</option> | ||
</select> | ||
<p>School: {loading ? 'Loading' : data}</p> | ||
<p>Username: {data}</p> | ||
<button style={{ marginRight: '8px' }} onClick={() => setUserId(Math.random())}> | ||
Use previous id to refresh | ||
</button> | ||
<button onClick={() => run(Math.random())}>Use latest id to refresh</button> | ||
</div> | ||
); | ||
}; |
35 changes: 35 additions & 0 deletions
35
packages/hooks/src/useRequest/doc/refreshDeps/demo/refreshDepsAction.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React, { useState } from 'react'; | ||
import Mock from 'mockjs'; | ||
import { useRequest } from 'ahooks'; | ||
|
||
function getUsername(id: number): Promise<string> { | ||
console.log('use-request-refresh-deps-id', id); | ||
|
||
return new Promise((resolve) => { | ||
setTimeout(() => { | ||
resolve(Mock.mock('@name')); | ||
}, 1000); | ||
}); | ||
} | ||
|
||
export default () => { | ||
const [userId, setUserId] = useState<number>(); | ||
const { data, loading, run } = useRequest((id: number) => getUsername(id), { | ||
refreshDeps: [userId], | ||
refreshDepsAction: () => run(userId), | ||
}); | ||
|
||
if (loading) { | ||
return <div>loading...</div>; | ||
} | ||
|
||
return ( | ||
<div> | ||
<p>Username: {data}</p> | ||
<button style={{ marginRight: '8px' }} onClick={() => setUserId(Math.random())}> | ||
Use latest id to refresh | ||
</button> | ||
<button onClick={() => run(Math.random())}>Use latest id to refresh</button> | ||
</div> | ||
); | ||
}; |
47 changes: 47 additions & 0 deletions
47
packages/hooks/src/useRequest/doc/refreshDeps/refreshDeps.en-US.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
--- | ||
nav: | ||
path: /hooks | ||
group: | ||
path: /use-request | ||
--- | ||
|
||
# RefreshDeps | ||
|
||
By setting `options.refreshDeps`, `useRequest` will run [refresh](https://ahooks.js.org/hooks/use-request/basic/#result) automatically when initialization and dependencies changes, achieving the effect of [Refresh (repeat the last request)](https://ahooks.js.org/hooks/use-request/basic/#refresh-repeat-the-last-request). | ||
|
||
```tsx | pure | ||
const [userId, setUserId] = useState('1'); | ||
const { data, run } = useRequest(() => getUserSchool(userId), { | ||
refreshDeps: [userId], | ||
}); | ||
``` | ||
|
||
In the example code above, `useRequest` will execution when it is initialized and `userId` changes. | ||
|
||
It is exactly the same with the following implementation | ||
|
||
```tsx | pure | ||
const [userId, setUserId] = useState('1'); | ||
const { data, refresh } = useRequest(() => getUserSchool(userId)); | ||
|
||
useEffect(() => { | ||
refresh(); | ||
}, [userId]); | ||
``` | ||
|
||
### Refresh last request | ||
|
||
<code src="./demo/refreshDeps.tsx" /> | ||
|
||
### Custom refresh | ||
|
||
<code src="./demo/refreshDepsAction.tsx" /> | ||
|
||
## API | ||
|
||
### Options | ||
|
||
| Property | Description | Type | Default | | ||
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | ------- | | ||
| refreshDeps | When the content of the array changes, trigger refresh. | `React.DependencyList` | `[]` | | ||
| refreshDepsAction | Customize the request behavior for dependency refresh, this parameter is called after initialization and dependencies changes. | `() => void` | - | |
47 changes: 47 additions & 0 deletions
47
packages/hooks/src/useRequest/doc/refreshDeps/refreshDeps.zh-CN.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
--- | ||
nav: | ||
path: /hooks | ||
group: | ||
path: /use-request | ||
--- | ||
|
||
# 依赖刷新 | ||
|
||
通过设置 `options.refreshDeps`,在初始化和依赖变化时, `useRequest` 会自动调用 [refresh](https://ahooks.js.org/zh-CN/hooks/use-request/basic/#result) 方法,实现[刷新(重复上一次请求)](https://ahooks.js.org/zh-CN/hooks/use-request/basic/#刷新重复上一次请求)的效果。 | ||
|
||
```tsx | pure | ||
const [userId, setUserId] = useState('1'); | ||
const { data, run } = useRequest(() => getUserSchool(userId), { | ||
refreshDeps: [userId], | ||
}); | ||
``` | ||
|
||
上面的示例代码,`useRequest` 会在初始化和 `userId` 变化时,触发函数执行。 | ||
|
||
与下面代码实现功能完全一致 | ||
|
||
```tsx | pure | ||
const [userId, setUserId] = useState('1'); | ||
const { data, refresh } = useRequest(() => getUserSchool(userId)); | ||
|
||
useEffect(() => { | ||
refresh(); | ||
}, [userId]); | ||
``` | ||
|
||
### 刷新上一次请求 | ||
|
||
<code src="./demo/refreshDeps.tsx" /> | ||
|
||
### 自定义刷新行为 | ||
|
||
<code src="./demo/refreshDepsAction.tsx" /> | ||
|
||
## API | ||
|
||
### Options | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | | ||
| ----------------- | ------------------------------------------------------------------- | ------------ | ------ | | ||
| refreshDeps | 依赖数组,当数组内容变化后,发起请求。同 `useEffect` 的第二个参数。 | `any[]` | `[]` | | ||
| refreshDepsAction | 自定义依赖刷新时的请求行为,该参数会在初始化和依赖变化后被调用。 | `() => void` | - | |
44 changes: 0 additions & 44 deletions
44
packages/hooks/src/useRequest/doc/refreshDeps/refresyDeps.en-US.md
This file was deleted.
Oops, something went wrong.
44 changes: 0 additions & 44 deletions
44
packages/hooks/src/useRequest/doc/refreshDeps/refresyDeps.zh-CN.md
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
旧的 demo 体现不出默认的依赖刷新行为,所以重写了一个