React项目遇TypeError: undefined is not an object错误，求排查方案

一、核心错误定位与修复 #

1. App.js类组件语法错误 #

• 类组件继承Component时多余括号：class App extends Component() → class App extends Component
• render方法不接收props参数，组件内props需通过this.props访问
• 未导入TASK_DATA与Task组件，也未将数据传递给依赖组件
• 路由中Task组件未传入任务数据props

修复后的App.js：

import React, { Component } from 'react';
import { Router, Routes, Route } from 'react-router-dom';
import TASK_DATA from './TASK_DATA';
import Task from './Task';
import Window from './Window';
import Bar from './Bar';
import Content from './Content';
import Footer from './Footer';

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div>Menu
          <p>nerds.family</p>
          <p>img kółeczko</p>
        </div>

        <Bar/>
        <hr className="sep"></hr>
        <Router>
          {/* 传递任务数据给Window组件 */}
          <Window tasks={TASK_DATA} />
          <Routes>
            <Route path="/" element={<Content/>}/>
            {/* 用动态路由参数匹配任务 */}
            <Route path="/task-:id" element={<Task tasks={TASK_DATA} />}/>
            <Route path="/task-2"></Route>
            <Route path="/task-3"></Route>
            <Route path="/task-4"></Route>
          </Routes>
        </Router>
        <Footer/>
      </div>
    );
  }
}
export default App;

2. Task.js组件定义不完整 #

• 缺少组件函数声明，需明确接收props参数
• 通过路由参数匹配对应任务数据

修复后的Task.js：

import React from 'react';
import { useParams } from 'react-router-dom';

function Task({ tasks }) {
  const { id } = useParams();
  // 根据路由id匹配任务数据
  const task = tasks.find(item => item.id === `t${id}`);

  if (!task) return <div>任务不存在</div>;

  return (
    <div className="container">
      <div className="taskText">
        <h2>{task.title}</h2>
        <p>{task.content}</p>
      </div>
      <div className="taskCrit">
          <h1>Acceptance Criteria</h1>
          <input type="checkbox"/>
      </div>
    </div>
  );
}

export default Task;

3. Window.js函数组件错误使用this #

• 函数组件不能用this，需通过props接收任务数据并循环渲染列表
• 按任务状态动态匹配图标，替代硬编码写法

修复后的Window.js：

import React from 'react';
import { Link} from 'react-router-dom';

import CheckIcon from '@mui/icons-material/Check';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import LockIcon from '@mui/icons-material/Lock';

function Window({ tasks }) {
  const getIcon = (status) => {
    switch(status) {
      case 'done':
        return <CheckIcon className={status}/>;
      case 'current':
        return <ArrowForwardIcon className={status}/>;
      case 'lock':
        return <LockIcon className={status}/>;
      default:
        return null;
    }
  };

  return (
    <div className="window">
      <div className="header">
          YOUR TASKS
      </div>
      <hr></hr>
      <div className="tasksList">
          <ul>
            {tasks.map(task => (
              <li key={task.id} className={task.status === 'current' ? 'curr' : ''}>
                <Link to={`/task-${task.id.slice(1)}`}>
                  {getIcon(task.status)}
                  {task.title}
                </Link>
              </li>
            ))}
          </ul>
      </div>
    </div>
  );
}

export default Window;

二、额外注意事项 #

• 确保Bar、Content、Footer等组件文件路径正确并完成导入
• 动态路由参数:id可避免重复编写任务路由，简化代码维护
• 匹配任务时注意id格式转换：TASK_DATA中id为t1，路由路径为task-1，用task.id.slice(1)提取数字部分

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