TypeError：无法读取未定义反应的属性“状态”答案

【问题标题】：TypeError: Cannot read property 'state' of undefined reactTypeError：无法读取未定义反应的属性“状态”
【发布时间】：2019-05-17 21:42:43
【问题描述】：

我一直在用 react 编写待办事项列表，但遇到了一个我一直无法解决的问题。我设法让待办事项列表动态更新我的数组状态，但在显示它时遇到了一点问题。这是代码：（https://codesandbox.io/s/friendly-curran-fldtg?fontsize=14）。在顶部，我简要解释了所有内容的作用。问题区域在底部，这行代码：

const DisplayTasks = () => {
  const { tasksarray } = this.state;
  return (
    <ol>
      {tasksarray.map(eachTask => (
        <li>{eachTask}</li>
      ))}
    </ol>
  );
};

通过删除 DisplayTask 组件并将 ol 代码放入 render() 中，我可以让应用按照我想要的方式运行，如下所示：

  render() {                                                      
  const { tasksarray } = this.state;
  return (
    <div>
      <GetTask task={this.inputTask} />
      <ol>
        {tasksarray.map(eachTask => (
          <li>{eachTask}</li>
        ))}
      </ol>
    </div>
    );
  }
}

但我想知道为什么当我尝试将其作为组件执行时，我得到 TypeError Cannot read property 'state' of undefined，以及是否有办法让它作为组件而不是直接在 render() 中工作？

【问题讨论】：

标签： reactjs

【解决方案1】：

您无法在功能组件中访问this.state。

在 react 中，父组件可以使用 props 向子组件传递数据，如下所示

 const DisplayTasks = ({tasks}) => {
    return (
     <ol>
      {tasks.map((task, index) => <li key={index}>{task}</li>)}
     </ol>
    );
 };


 render() {                                                      
   return (
     <div>
       <GetTask task={this.inputTask} />
       <DisplayTasks tasks={this.state.tasksarray} />
     </div>
   );
 }

【讨论】：

有道理。感谢您的回答。