【山东大学软件学院21级项目实训】前端：React状态管理利用useState管理用户信息、头像和密码

导入的库和组件

• @mui/material：这个库提供了Material-UI组件，如Avatar、Button、TextField等，用于构建现代化的用户界面。

• @mui/system：提供了Box组件，用于更灵活地处理布局和样式。

• @mui/x-date-pickers：包含日期选择器组件DesktopDatePicker，以及用于本地化的LocalizationProvider和日期适配器AdapterDayjs。

• notistack：提供了useSnackbar钩子，用于显示通知消息。

• react-router-dom：用于处理路由导航。

• browser-image-compression：用于图片压缩处理。

useState和useEffect

使用useState管理组件状态，包括用户信息【名字，邮箱，个性签名】、头像和密码。

const [proInfo, setProInfo] = useState({
  name: "",
  email: "",
  description: "",
});

proInfo 是一个状态变量，用来存储用户的个人信息，包括 name（姓名）、email（邮箱）、description（个性签名）。

setProInfo 是用来更新 proInfo 状态的函数。通过调用 setProInfo，可以更新 proInfo 中的值。

头像

const [avatar, setAvatar] = useState(localStorage.getItem("avatar"));
const [file, setFile] = useState();
const { enqueueSnackbar } = useSnackbar();
const navigate = useNavigate();

avatar 是一个状态变量，用来存储用户的头像信息。

useState 的初始值是通过 localStorage.getItem("avatar") 获取的，即从本地存储中获取名为 "avatar" 的值。

file 是一个状态变量，用来存储用户选择的文件。

enqueueSnackbar 是从 useSnackbar hook 中解构出来的函数。这通常用于在界面上显示通知消息，如弹出框通知。

navigate 是从 useNavigate hook 中获取的函数。这个函数可以用来在React Router中进行页面导航，跳转到指定的页面。

密码

const [pwd, setPwd] = useState({ old: "", new: "" });

pwd 是一个状态变量，用来存储用户输入的密码信息。

setPwd 是用来更新 pwd 状态的函数。初始状态为 { old: "", new: "" }，表示旧密码和新密码都为空字符串。

因此通过使用 useState 来定义和管理多个状态变量，包括用户的个人信息、头像信息、文件选择、密码信息等。同时使用了 useSnackbar 和 useNavigate 来获取显示通知和进行页面导航的功能。

使用useEffect在组件加载和状态更新时触发特定逻辑，如获取用户信息、处理上传成功或失败等。

  useEffect(() => {
    if (pwdSuccess) {
      enqueueSnackbar("密码更新成功，请重新登录", { variant: "success" });
      navigate("/");
    }
  }, [pwdSuccess]);
  useEffect(() => {
    if (pwdError) {
      // console.log(pwdErrorMsg?.response.data.message);
      enqueueSnackbar("原密码错误", { variant: "error" });
    }
  }, [pwdError]);
  useEffect(() => {
    if (infoSuccess) {
      enqueueSnackbar("个人信息更新成功", { variant: "success" });
    }
  }, [infoSuccess]);

  useEffect(() => {
    if (_infoSuccess) {
      setProInfo(_info.data.data);
    }
  }, [_infoSuccess]);

  useEffect(() => {
    if (imgSuccess) {
      // setProInfo({ ...proInfo, avatar: imgData.data.url });
      //上传新图片url
      infoMutate({
        url: upd_user_info,
        method: "post",
        data: { avatar: imgData.data.url },
      });
    }

这些 useEffect hook 用于响应不同的状态变化，执行相应的副作用操作，如显示消息、导航到新页面或更新状态。每个 useEffect 的依赖数组指定了在哪些状态变量变化时触发对应的副作用函数。