Question

我编写了一个简单的ReactJS代码，使用getRecords方法从Store类获取记录数组，并使用map函数在List组件内的View组件中打印该数组。但是我收到的错误是Uncaught TypeError: Cannot read property 'map' 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 {
    constructor() {
        super();
        this.Store = new Store();
    }

    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>
                        {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;

Answer 1

您需要致电this.Store.getRecords().map

你拥有的是Store.getRecords.map

那里有两个问题 - 一个是你在类本身上调用该方法，而不是类的实例。二，getRecords是一个需要调用的方法 - .method()，而不是.property

不是React问题。

您的<b>标记中确实存在React问题 - 应该只是eachRecord.name。 this.props访问从其父级传递给组件的props。你没有将任何道具传递给View。

值得注意的是，如果您计划更改这些记录（我看到您删除按钮等已删除），您可能希望将它们存储在组件的状态而不是直接类属性。因此，在您的构造函数中，您使用this.Store = ...代替this.state = { store: new Store() }，然后可以使用this.setState()修改它 https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly

将数组元素映射到列表项时出错

1 个答案: