我编写了一个简单的ReactJS代码,使用getRecords方法从Store类获取记录数组,并使用map函数在List组件内的View组件中打印该数组。但是我收到的错误是Uncaught TypeError: Cannot read property 'getRecords' of undefined
。请告诉我代码中的问题是什么?
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import View from './View.jsx';
ReactDOM.render(
<View />,
document.getElementById('app')
);
View.jsx
import React from 'react';
import Store from './Store.js';
class View extends React.Component {
render() {
return (
<div className="container" style={{marginTop:'25px'}}>
<ul className="list-group">
<li style={{backgroundColor:'#696969', color:'#f5f5f5', textAlign:'center', padding:'5px', fontSize:'16px', borderRadius:'5px 5px 0px 0px'}}><b>Records</b></li>
{this.Store.getRecords.map((eachRecord,index) =>
<li key={index} className="list-group-item" style={{cursor:'pointer'}}>
<b>{this.props.eachRecord.name}</b>
<button style={{float:'right'}}>Delete</button>
</li>
)}
</ul>
<input type="text"/>
<button>Add</button>
</div>
);
}
}
export default View;
Store.js
import React from 'react';
class Store {
records: [
{
id: 1,
name: 'First Record',
},
{
id: 2,
name: 'Second Record',
},
{
id: 3,
name: 'Third Record',
},
{
id: 4,
name: 'Fourth Record',
},
{
id: 5,
name: 'Fifth Record',
}
];
getRecords() {
return this.records;
}
};
export default Store;