ReactJS报错：Uncaught TypeError: 无法读取undefined的length属性

错误原因 #

你碰到的Uncaught TypeError是因为User的初始状态是undefined——在axios请求还没返回数据时，代码就尝试读取User.length，而undefined没有length属性，直接访问就会报错。

解决方案 #

有两种简单的修复方式，结合代码优化整理如下：

1. 初始化User为空数组

把useState的初始值设为空数组，这样即使请求未完成，User也是一个合法数组，length属性存在：

const [User, setUser] = useState([]); // 从useState()改为useState([])

2. 使用可选链操作符做安全访问

如果不想修改初始值，可以用可选链?.确保只有当User存在时才读取length：

{User?.length === 0 ? " " : alert('a')}

额外优化建议 #

直接把alert写在JSX里不太规范，每次组件渲染都会触发执行。建议改用useEffect监听User的变化来做判断：

useEffect(() => {
  if (User.length > 0) {
    alert('a');
  }
}, [User]); // 仅当User数据变化时触发

修改后的完整代码 #

import * as React from "react";
import PropTypes from "prop-types";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import { useEffect, useState } from "react";
import axios from "axios";

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`vertical-tabpanel-${index}`}
      aria-labelledby={`vertical-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.number.isRequired,
  value: PropTypes.number.isRequired,
};

function a11yProps(index) {
  return {
    id: `vertical-tab-${index}`,
    "aria-controls": `vertical-tabpanel-${index}`,
  };
}

export default function StudentsList() {
  const [value, setValue] = React.useState(0);
  const [User, setUser] = useState([]); // 初始化空数组

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  useEffect(()=>{
    axios.get('http://localhost:3001/users').then(res=>setUser(res.data))
  },[])

  // 监听User数据变化做判断
  useEffect(() => {
    if (User.length > 0) {
      alert('a');
    }
  }, [User])

  return (
    <Box
      sx={{
        flexGrow: 1,
        bgcolor: "background.paper",
        display: "flex",
        height: 224,
      }}
    >
      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
        sx={{ borderRight: 1, borderColor: "divider" }}
      >
        <Tab label="Item One" {...a11yProps(0)} />
        <Tab label="Item Two" {...a11yProps(1)} />
        <Tab label="Item Three" {...a11yProps(2)} />
      </Tabs>
      <TabPanel value={value} index={0}>
        {User.length === 0 ? "暂无学生数据" : "学生列表已加载"}
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </Box>
  );
}

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