【山东大学软件学院21级项目实训】前端：深入理解React Hooks使用useMutation和useQuery管理组件状态

useMutation和useQuery

使用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 }}>
      {value}
    </Typography>
  );
};

作用：MyTitle 是一个函数式组件，用来渲染特定样式的标题文本。

属性：

• value：用来作为标题文本显示的值。

返回结果：使用 Typography 组件来展示标题，设置为 variant="h6"，并应用了一些样式（sx），包括顶部边距和底部边距。

主要组件结构

<Box sx={{ marginLeft: 5 }}>
<MyTitle value="用户名" />
<TextField
  size="small"
  id="outlined-required"
  label="Name"
  value={proInfo.name}
  onChange={(e) => {
    setProInfo({ ...proInfo, name: e.target.value });
  }}
/>
{/* {proInfo.name} */}
<MyTitle value="邮箱" />
<TextField
  disabled
  size="small"
  id="outlined-required"
  label="email"
  value={proInfo.email}
/>
<MyTitle value="个性签名" />
<MyTextarea
  placeholder="介绍一下你自己叭..."
  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组件显示标题和文本，通过自定义样式增强用户界面。