React项目报错：Cannot read properties of undefined (reading 'UseState')

错误原因 #

你遇到的错误源于两个问题：

1. React状态钩子的正确名称是小写开头的useState，而非大写的UseState——大写的UseState并不存在于React对象上，导致读取undefined属性报错。
2. 组件名userlist未遵循React组件首字母大写的规范，可能引发后续渲染异常。

修复步骤 #

1. 修正钩子名称：将React.UseState改为React.useState，更推荐直接解构导入useState简化代码。
2. 规范组件命名：将组件函数名userlist改为UserList，符合React组件命名规则。

修改后的完整代码 #

userList.jsx #

import './userlist.css';
import { userRows } from '../../dummydata';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import { DataGrid } from '@mui/x-data-grid';
import { Link } from 'react-router-dom';
import React, { useState } from "react";

export default function UserList() {
    const [data, setData] = useState(userRows);

    const handleDelete = (id) => {
        setData(data.filter((item) => item.id !== id));
    };
    const columns = [
        { field: 'id', headerName: 'ID', width: 100 },
        {
            field: 'username', headerName: 'User', width: 200, renderCell: (params) => {
                return (
                    <div className='userListUser'>
                        <img className='userListImg' src={params.row.avatar} alt="" />
                        {params.row.username}
                    </div>
                )
            }
        },
        { field: 'email', headerName: 'Email', width: 200 },
        {
            field: 'status',
            headerName: 'Status',
            width: 200,
        },
        {
            field: 'transaction',
            headerName: 'Transaction Volume',
            width: 200,
        },
        {
            field: 'action',
            headerName: 'Action',
            width: 150,
            renderCell: (params) => {
                return (
                    <>
                        <Link to={"/user/" + params.row.id}>
                            <button className='userListEdit'>Edit</button>
                        </Link>
                        <DeleteOutlineIcon className='userListDelete' onClick={() => handleDelete(params.row.id)} />
                    </>
                )
            }
        },
    ];
    return (
        <div className='userList'>
            <DataGrid
                rows={data} disableSelectionOnClick
                columns={columns}
                pageSize={8}
                rowsPerPageOptions={[5]}
                checkboxSelection
            />
        </div>
    )
}

App.js（保持原代码即可） #

import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Topbar />
      <div className="nav-container">
        <Sidebar />
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route path="/users" element={<UserList />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

额外说明 #

• 直接解构导入useState是React官方推荐写法，让代码更简洁易读。
• 组件名首字母大写是强制规范，否则React会将其识别为原生HTML标签，导致组件无法正常渲染。

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