Material-UI抽屉组件：函数式组件用componentDidMount报错，如何调用API？

你遇到的语法错误核心原因很明确：你写的是函数式组件，但误用了类组件的生命周期方法和语法。componentDidMount是类组件专属的生命周期钩子，函数组件里根本不支持；同时函数组件也没有this对象，所以this.setState自然也会报错。

下面是针对你的场景的正确实现方式：

1. 替换类组件语法为函数组件的React Hooks #

在函数组件中，我们用useEffect来替代componentDidMount的初始化执行逻辑，用useState来声明和管理状态变量：

import React, { useState, useEffect } from 'react';
// 别忘了导入你的useStyles和Material-UI组件

export default function PermanentDrawerLeft() {
  const classes = useStyles();
  // 用useState声明状态变量，替代类组件的this.state
  const [loginEmail, setLoginEmail] = useState('');
  const [data, setData] = useState({});

  // 用useEffect替代componentDidMount，第二个参数传空数组表示只在组件挂载时执行一次
  useEffect(() => {
    const storedEmail = localStorage.getItem('loginEmail');
    setLoginEmail(storedEmail);
    console.log(storedEmail);

    // 注意：这里的URL可能需要修正，确保路径参数格式正确（比如加个斜杠）
    fetch(`http://localhost:9000/api/item/view/${storedEmail}`)
      .then((resp) => resp.json()) // 简化链式调用，避免嵌套then
      .then((res) => {
        console.log(res.data.user_info.id);
        // localStorage.setItem('id', res.data.user_info.id);
        setData(res.data); // 用setData替代this.setState
      })
      .catch((err) => {
        // 添加错误处理，避免请求失败时无提示
        console.error('API请求失败:', err);
      });
  }, []); // 空数组依赖确保只执行一次，对应componentDidMount的行为

  return (
    // ... 你的Material-UI抽屉代码
  );
}

2. 额外注意事项 #

• 我简化了fetch的链式调用，去掉嵌套then让代码更易读；
• 给fetch添加了catch错误处理，这是生产环境代码的必备环节；
• 检查你的API URL：原代码里view${loginEmail}会变成viewxxx@xx.com，正确的路径参数格式应该是view/${loginEmail}，这样后端才能正确解析参数；
• 确保你已经导入了useState和useEffect这两个钩子，否则会报未定义的错误。

这样修改后，你的API调用逻辑就能正常工作，语法错误也会消失啦。

内容的提问来源于stack exchange，提问作者koko ka