功能组件到类组件错误：无法读取未定义的属性“id”

Question

我正在处理一个小项目，并且正在将功能组件转换为基于类的组件，以便我的组件可以管理其状态。在翻译组件时，我遇到了一个错误：

TypeError:Cannot read property 'id' of undefined

此组件用作功能组件，因此我不确定为什么我现在收到此错误。谁能回答为什么在从功能组件转换为基于类的组件时我收到此错误？这与范围有关吗？我只是有一些语法错误吗？我一直在努力解决这个问题，只是不明白为什么它无法读取现在在我的组件渲染部分返回中的“id”属性。

组件代码：

  import React, {Component} from "react";
import "./OpenTasksComponent.css"



class openTasks extends Component{
  constructor(){
      super();

    this.handleClick = this.handleClick.bind(this);
  }

     handleClick(){
        let x = document.body.nodeName;
        console.log(x);
    }
    
    render(){

        return (
    
            <div className="tasks" value = {this.task.id}>
                <h1 onClick={this.handleClick}>{this.task.clientName}</h1>
                <div className="accordion-item accordion-item-open">
                    <h2>{this.task.matter}</h2>
                    <p>{this.task.matterStatus}</p>
                </div>
            </div>
        )

    }
    
    
}

export default openTasks

应用代码：

import './App.css';
import Task from './components/open-tasks-component/open-tasks-component';
import tasksData from './components/open-tasks-component/tasks-data';
import Header from './Header';

function App() {
  const Tasks = tasksData.map(task=> <Task key={task.id} task ={task}/>)
  return (
    <div className="App">
        <Header />
    
        {Tasks}
    </div>
  );
}

export default App;

Answer 1

在 App 中，您向下传递了一个 prop，但您尝试使用 this.task.id 在子类组件中读取它，它应该是 this.props.task.id

Answer 2

功能组件也可以管理状态。 你可以使用 useState。

const [state, setState] = useState(null);