@@ -39,13 +39,16 @@ module.exports = {
3939};
4040```
4141
42- ### 二、界面渲染
42+ ### 二、界面渲染并且使用react-query调用接口
43+ [ react-query] ( https://tanstack.com/query/latest ) 更详细的使用,请参照官方文档
4344
4445``` js
4546import React , { useState } from ' react' ;
4647import { connect } from ' react-redux' ;
4748import { Button } from ' @uiw/react-native' ;
48- import { login } from ' ../../hooks/users'
49+ import { userLogin } from ' @/services/users' ;
50+ import { useMutation } from ' react-query'
51+
4952
5053const Demo = ({ update }) => {
5154 const [store , setStore ] = useState ({
@@ -55,7 +58,12 @@ const Demo = ({ update }) => {
5558 },
5659 })
5760
58- const { mutate , isLoading } = login ({ formData })
61+ const { mutate , isLoading } = useMutation ({
62+ mutationFn: userLogin,
63+ onSuccess: async (data ) => {
64+ console .log (' data' ,data)
65+ },
66+ })
5967
6068 return (
6169 < Button
@@ -72,30 +80,9 @@ const Demo = ({ update }) => {
7280
7381export default Demo
7482
75- ` ` `
76- ### 三、使用react-query调用api
77- [react-query](https://tanstack.com/query/latest) 更详细的使用,请参照官方文档
78-
79- ` ` ` js
80- import { userLogin } from ' ../services/users' ;
81- import { useQuery , useMutation } from ' react-query'
82-
83- // 登录
84- export const login = ({ config = {}, formData }) => {
85- const mutation = useMutation ({
86- mutationFn: userLogin,
87- onSuccess: async (data ) => {
88- console .log (' data' ,data)
89- },
90- ... config
91- })
92- return mutation
93- }
94-
95-
9683` ` `
9784
98- ### 四 、services文件调用
85+ ### 三 、services文件调用
9986
10087> 配合系统封装的request进行mock数据请求。如需区分是mock数据,还是真实后端数据,调用真实数据时,注释mocker数据配置即可
10188
@@ -114,7 +101,7 @@ export const login = ({ config = {}, formData }) => {
114101
115102### 一、rematch中异步方法
116103
117- ` ` `
104+ ` ` ` js
118105export default {
119106 name: ' home' ,
120107 state: {
0 commit comments