从类中调用组件内部的数组时出错

时间:2017-10-03 11:38:12

标签: reactjs

我编写了一个简单的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;

0 个答案:

没有答案