How to fix 'TypeError: Cannot read property 'map' of undefined' in React
How to fix 'TypeError: Cannot read property 'map' of undefined' in React
你好,我是 React 的新手,我试图显示我在 state 中创建的名为 Todo 的数组,但是我收到错误 "TypeError: Cannot read property 'map' of undefined"。你能告诉我哪里做错了吗?
这是我的代码
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
App.js
import React, { Component } from 'react';
import Todos from './component/Todos.js';
import './App.css'
class App extends Component {
state={
todos:[
{
id: 1,
title:'Star Wars',
point:9,
watched: true
},
{
id: 2,
title:'Into the Wild',
point:null,
watched: false
},
{
id: 3,
title:'Enter the Void',
point:6,
watched: true
},
{
id: 4,
title:'Tschick',
point:7.5,
watched: true
}
]
}
render() {
return (
<div className="App">
<Todos />
</div>
);
}
}
export default App;
Todo.js
import React, { Component } from 'react';
class Todos extends Component {
render() {
return this.props.todos.map((todo) => (
<div>
<h3>{todo.title}</h3>
</div>
));
}
}
export default Todos;
The error that I get
您没有将 todos
变量传递给您的组件。
您必须像这样传入 属性:
<Todos todos={this.state.todos} />
在您的 App.js
中从状态调用待办事项
<Todos todos={this.state.todos}/>
之后它应该可以正常工作
你好,我是 React 的新手,我试图显示我在 state 中创建的名为 Todo 的数组,但是我收到错误 "TypeError: Cannot read property 'map' of undefined"。你能告诉我哪里做错了吗?
这是我的代码
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
App.js
import React, { Component } from 'react';
import Todos from './component/Todos.js';
import './App.css'
class App extends Component {
state={
todos:[
{
id: 1,
title:'Star Wars',
point:9,
watched: true
},
{
id: 2,
title:'Into the Wild',
point:null,
watched: false
},
{
id: 3,
title:'Enter the Void',
point:6,
watched: true
},
{
id: 4,
title:'Tschick',
point:7.5,
watched: true
}
]
}
render() {
return (
<div className="App">
<Todos />
</div>
);
}
}
export default App;
Todo.js
import React, { Component } from 'react';
class Todos extends Component {
render() {
return this.props.todos.map((todo) => (
<div>
<h3>{todo.title}</h3>
</div>
));
}
}
export default Todos;
The error that I get
您没有将 todos
变量传递给您的组件。
您必须像这样传入 属性:
<Todos todos={this.state.todos} />
在您的 App.js
中从状态调用待办事项
<Todos todos={this.state.todos}/>
之后它应该可以正常工作