Question

我一直在做一个待办事项清单，以进行反应，但遇到一个我一直难以解决的问题。我设法获得了待办事项列表以动态更新我的阵列状态，但是在显示它时遇到了一些问题。以下是代码：（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用作组件时，为什么会出现TypeError无法读取未定义的属性“ state”，以及是否有办法使它作为组件而不是直接在render（）中工作？

Answer 1

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

在反应中，父组件可以使用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>
   );
 }

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

1 个答案: