时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“状态”。更新的反应

javascript - TypeError：无法读取未定义的属性“状态”。更新的反应

问题描述

我对反应很陌生，所以我只是在关注 youtube 视频，但我收到了这个错误，我对此一无所知。终端显示“编译成功”，但我收到此错误。 这是我的 App.js 代码

import Todos from './components/Todos';
import './App.css';

function App() {
  React.state = {
    todos: [
      {
        id: 1,
        title: 'Pay the rent',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner at Pappu',
        completed: false
      },
      {
        id: 3,
        title: 'CODROBO Meeting',
        completed: false
      }
    ]
  };
  return (
    <div className='App'>
      <Todos todos={this.state.todos} />
    </div>
  );
}

export default App;

这是我的Todos.js 代码


function Todos() {
  return this.props.todos.map(todo => <h3> {todo.title} </h3>);
}

export default Todos;

根据视频讲座浏览器必须显示所有待办事项，但我收到此错误

标签： javascriptreactjs

解决方案

正如@Akhil Aravind 指出的那样，您正在尝试访问this功能组件，这是类的属性。试试这个：

import React, { Component } from 'react';
import Todos from './components/Todos';
import './App.css';

class App extends Component {
  state = {
    todos: [
      {
        id: 1,
        title: 'Pay the rent',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner at Pappu',
        completed: false
      },
      {
        id: 3,
        title: 'CODROBO Meeting',
        completed: false
      }
    ]
  };
render(){
return (
    <div className='App'>
      <Todos todos={this.state.todos} />
    </div>
  );
}

}

export default App;

function Todos(props) {
  return props.todos.map(todo => <h3> {todo.title} </h3>);
}

export default Todos;

希望这能解决。

推荐阅读