diff --git a/packages/client/package.json b/packages/client/package.json index a04531a1a..596ec8d64 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -29,6 +29,7 @@ "i18next": "^21.6.0", "react-helmet": "^6.1.0", "react-i18next": "^11.15.1", + "react-image-lightbox": "^5.1.4", "use-deep-compare-effect": "^1.8.1" }, "peerDependencies": { diff --git a/packages/client/src/api-client/demos/demo1.tsx b/packages/client/src/api-client/demos/demo1.tsx index 09a09cd5f..aab4a16f7 100644 --- a/packages/client/src/api-client/demos/demo1.tsx +++ b/packages/client/src/api-client/demos/demo1.tsx @@ -20,5 +20,5 @@ export default compose(...providers)(() => { action: 'get', params: {}, }); - return
(
支持 `axios.request(config)`,config 详情查看 [axios](https://github.com/axios/axios#request-config)
```ts
-const { data, loading, refresh } = useRequest({ url: '/users' });
+const { data, loading, refresh, run, params } = useRequest({ url: '/users' });
+
+// useRequest 里传的是 AxiosRequestConfig,所以 run 里传的也是 AxiosRequestConfig
+run({
+ params: {
+ pageSize: 20,
+ }
+});
```
+例子如下:
+
+
+
或者是 NocoBase 的 resource & action 请求:
```ts
-const { data } = useRequest({
+const { data, run } = useRequest({
resource: 'users',
- action: 'get',
- params: {},
+ action: 'list',
+ params: {
+ pageSize: 20,
+ },
+});
+
+// useRequest 传的是 ResourceActionOptions,所以 run 直接传 action params 就可以了。
+run({
+ pageSize: 50,
});
```
@@ -92,7 +110,9 @@ const { data } = useRequest({
也可以是自定义的异步函数:
```ts
-const { data, loading, refresh } = useRequest(() => Promise.resolve({}));
+const { data, loading, run, refresh, params } = useRequest((...params) => Promise.resolve({}));
+
+run(...params);
```
更多用法查看 ahooks 的 [useRequest()](https://ahooks.js.org/hooks/use-request/index)
diff --git a/yarn.lock b/yarn.lock
index 47141fd72..262c8ad45 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6272,7 +6272,7 @@ execa@^5.0.0:
exenv@^1.2.0:
version "1.2.2"
- resolved "https://registry.npmmirror.com/exenv/download/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+ resolved "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
exit@^0.1.2:
@@ -12355,8 +12355,8 @@ react-i18next@^11.15.1:
react-image-lightbox@^5.1.4:
version "5.1.4"
- resolved "https://registry.nlark.com/react-image-lightbox/download/react-image-lightbox-5.1.4.tgz#5b847dcb79e9efdf9d7cd5621a92e0f156d2cf30"
- integrity sha1-W4R9y3np79+dfNViGpLg8VbSzzA=
+ resolved "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz#5b847dcb79e9efdf9d7cd5621a92e0f156d2cf30"
+ integrity sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==
dependencies:
prop-types "^15.7.2"
react-modal "^3.11.1"
@@ -12373,12 +12373,12 @@ react-is@^17.0.1:
react-lifecycles-compat@^3.0.0:
version "3.0.4"
- resolved "https://registry.npmmirror.com/react-lifecycles-compat/download/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
- integrity sha1-TxonOv38jzSIqMUWv9p4+HI1I2I=
+ resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+ integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-modal@^3.11.1:
version "3.14.4"
- resolved "https://registry.npmmirror.com/react-modal/download/react-modal-3.14.4.tgz#2ca7e8e9a180955e5c9508c228b73167c1e6f6a3"
+ resolved "https://registry.npmjs.org/react-modal/-/react-modal-3.14.4.tgz#2ca7e8e9a180955e5c9508c228b73167c1e6f6a3"
integrity sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==
dependencies:
exenv "^1.2.0"