类型错误： 无法读取未定义的属性'state'。更新的反应

Question

我对反应很陌生，所以我只是关注 youtube 视频，但我得到了这个错误，我对此一无所知。终端显示"编译成功"，但我收到此错误。这是我的应用程序.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;

这是我的待办事项.js代码

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

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

Answer 1

正如@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;

希望这能解决。

Answer 2

您使用的是功能组件，同时使用状态的类组件的语法。这是行不通的。

有两种方法可以解决此问题：

第一个是最简单的，因为您的大部分代码都是使用类组件语法编写的 - 将其更改为类组件。

class App extends React.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;

或者，您可以将状态更改为功能组件的状态之一：

应用.js

import Todos from './components/Todos';
import './App.css';
function App() {
const [todos, setTodos] = React.useState([
{
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={todos} />
</div>
);
}
export default App;

待办事项.js

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

使用上述这两个文件应该可以完全解决您的问题。

Answer 3

要么传递道具，要么直接使用解构。

// using props if it's functional component
function Todos(props) {
return props.todos.map(todo => <h3> {todo.title} </h3>);
}

或

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

如果是功能组件，请使用props.todos. 如果基于类的组件使用this.props.todos

如我所见 - 您需要定义钩子或基于类的组件来定义状态

// Hooks
function App() {
const [todos, setTodos] = React.useState([
{
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={todos} />
</div>
);
}

基于类

class App extends React.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">
{this.state.todos.map(todo => (
<h3>{todo.title}</h3>
))}
</div>
);
}
}

Answer 4

从您的程序中，写入状态似乎有轻微错误。 您可以在下面或此处的我的示例中查看。我希望这对:)有所帮助

// App.js
import React, { useState } from "react";
import Todos from "./Todos";
export default function App() {
const [todos] = useState([
{
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={todos} />
</div>
);
}
// Todos.js
import React from "react";
function Todos({ todos }) {
return (
<React.Fragment>
{todos.map((item, i) => (
<div
style={{
background: "blue",
margin: "10px",
padding: "10px",
color: "white"
}}
key={i}
>
<p
style={{
background: "red",
width: "18px",
borderRadius: "50%",
padding: "5px"
}}
>
{item.id}
</p>
<h3>{item.title}</h3>
</div>
))}
</React.Fragment>
);
}
export default Todos;

Answer 5

在Todos函数中，您需要从App获得props，而且由于Todos是一个功能组件，因此不需要使用this关键字

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

export default Todos;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>