【山东大学软件学院21级项目实训】前端：深入理解React Hooks使用useMutation和useQuery管理组件状态
夏乐_ 2024-08-02 08:03:01 阅读 94
useMutation和useQuery
使用<code>useMutation发送更新请求，并处理请求的不同状态（成功、失败、进行中）。
postQueryFn：自定义的数据请求函数，用于与后端进行数据交互。
const {
mutate: imgMutate,
isSuccess: imgSuccess,
data: imgData,
isPending: imgPending,
} = useMutation({ mutationFn: postQueryFn });
作用：通过 useMutation hook 定义了一个名为 imgMutate 的函数，用于执行数据变更操作。
属性解构：
mutate：被重命名为 imgMutate，是一个函数，用于触发数据变更操作。
isSuccess：表示数据变更操作是否成功完成的状态。
data：包含成功数据变更后返回的数据。
isPending：表示数据变更操作是否正在进行中的状态。
const {
mutate: infoMutate,
isSuccess: infoSuccess,
data: infoData,
isPending: infoPending,
} = useMutation({ mutationFn: postQueryFn });
作用：定义了一个名为 infoMutate 的函数，用于执行另一种数据变更操作。
属性解构：
mutate：被重命名为 infoMutate，是一个函数，用于触发数据变更操作。
isSuccess：表示数据变更操作是否成功完成的状态。
data：包含成功数据变更后返回的数据。
isPending：表示数据变更操作是否正在进行中的状态。
const {
mutate: pwdMutate,
isSuccess: pwdSuccess,
data: pwdData,
isPending: pwdPending,
isError: pwdError,
error: pwdErrorMsg,
} = useMutation({ mutationFn: postQueryFn });
作用：定义了一个名为 pwdMutate 的函数，用于执行密码更新的数据变更操作。
属性解构：
mutate：被重命名为 pwdMutate，是一个函数，用于触发密码数据变更操作。
isSuccess：表示密码数据变更操作是否成功完成的状态。
data：包含成功密码数据变更后返回的数据。
isPending：表示密码数据变更操作是否正在进行中的状态。
isError：表示密码数据变更操作是否出现错误的状态。
error：包含错误信息的对象，在出错时可以访问该信息。
这些 useMutation hooks 通过提供 mutationFn 参数来执行异步的数据变更操作，并提供了多个有用的状态变量和函数，例如 mutate 函数用于触发变更、isSuccess 表示变更是否成功、data 包含返回的数据等。这种方式能够有效管理和响应数据变更操作的状态和结果，使得组件可以根据不同的状态执行相应的 UI 更新或错误处理逻辑。
使用useQuery从服务器获取用户信息，并在成功后更新组件状态。
queryFn：自定义的数据请求函数，用于与后端进行数据交互。
const {
data: _info,
isSuccess: _infoSuccess,
isLoading: _infoLoading,
} = useQuery({
queryKey: [get_user_info + "/" + localStorage.getItem("userId")],
queryFn: queryFn,
});
queryKey：一个数组，用于标识查询的唯一键。在这里，使用了 [get_user_info + "/" + localStorage.getItem("userId")]，它包括了 get_user_info 和当前用户的 ID。这个键用于确保每次查询的唯一性，以及在数据发生变化时能够触发新的查询。
queryFn：一个函数，用于实际执行数据获取的操作。它通常会返回一个 Promise，用于异步获取数据。在示例中，假设 queryFn 是一个函数，它执行了数据获取的操作，可能是一个 HTTP 请求或其他数据获取方法。
这种使用 useQuery hook 的方式允许组件轻松地管理和获取异步数据，并在数据发生变化时自动触发更新。通过属性解构，可以方便地获取到数据、成功状态和加载状态等信息，以便在UI中进行相应的展示和处理。
fileoptions
常量定义：fileoptions定义了文件选项，包括最大文件大小和是否使用Web Worker处理文件。
const fileoptions = {
maxSizeMB: 1,
useWebWorker: true,
};
MyTitle组件
用于显示标题的简单React函数组件
const MyTitle = ({ value }: { value: any }) => {
return (
<Typography variant="h6" sx={ { marginTop: 2, marginBottom: 1 }}>code>
{value}
</Typography>
);
};
作用：MyTitle 是一个函数式组件，用来渲染特定样式的标题文本。
属性：
value：用来作为标题文本显示的值。
返回结果：使用 Typography 组件来展示标题，设置为 variant="h6"code>，并应用了一些样式（sx），包括顶部边距和底部边距。
主要组件结构
<Box sx={ { marginLeft: 5 }}>
<MyTitle value="用户名" />code>
<TextField
size="small"code>
id="outlined-required"code>
label="Name"code>
value={proInfo.name}
onChange={(e) => {
setProInfo({ ...proInfo, name: e.target.value });
}}
/>
{/* {proInfo.name} */}
<MyTitle value="邮箱" />code>
<TextField
disabled
size="small"code>
id="outlined-required"code>
label="email"code>
value={proInfo.email}
/>
<MyTitle value="个性签名" />code>
<MyTextarea
placeholder="介绍一下你自己叭..."code>
value={proInfo.description}
change={(e: any) => {
setProInfo({ ...proInfo, description: e });
}}
/>
</Box>
结构：
使用 Box 组件包裹整个内容，并设置了左边距为 5。
使用 MyTitle 组件来展示标题文本，包括 "用户名"、"邮箱" 和 "个性签名"。
对于用户名和个性签名，提供了可以编辑的输入框组件（TextField 和自定义的 MyTextarea 组件）。
邮箱部分的输入框设置为禁用状态 (disabled)，即用户无法编辑该字段。
数据绑定和事件处理：
TextField 组件的 value 属性绑定到 proInfo.name 和 proInfo.email，分别显示用户的姓名和邮箱。
使用 onChange 事件处理函数来更新 proInfo 状态中的 name 和 description 字段，使得用户在输入框中输入时可以及时更新状态。
MyTextArea和LoadingButton组件：自定义的文本区域和加载按钮组件，用于展示和处理用户输入和操作。
组件样式
使用Material-UI的Grid和Paper组件实现布局，通过Box组件设置内边距和对齐方式。使用Typography组件显示标题和文本，通过自定义样式增强用户界面。
上一篇： 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端
下一篇： 设置 WebView,禁止缩放网页
本文标签
【山东大学软件学院21级项目实训】前端：深入理解React Hooks使用useMutation和useQuery管理组件状态
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。