Question

我正在尝试使用ReactJS渲染表，但出现错误-无法读取未定义的属性'map'-

代码：

import React, { Component } from 'react';
import './Table.css'

const obj = [{
    name: "onion",
    price: ".99",
    id: 1
}, {
    name: "pepper",
    price: "1.25",
    id: 2
}, {
    name: "broccoli",
    price: "3.00",
    id: 3
}];

class TableRow extends React.Component {
    render() {
        const {
            data
        } = this.props;
        const row = data.map((data) =>
            <tr>
                <td key={data.name}>{data.name}</td>
                <td key={data.id}>{data.id}</td>
                <td key={data.price}>{data.price}</td>
            </tr>
        );
        return (
            <span>{row}</span>
        );
    }
}

class Table extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <table>
                <TableRow data={this.props.data} />
            </table>
        );
    }
}

export default Table;

我将表组件导入了App.js文件。但是，该错误发生在Table.js的以下行上：const row = data.map（（data）=> ...我能得到一些帮助吗？

Answer 1

在您的table类中，将下面的代码从<TableRow data={this.props.data} />更改为<TableRow data={obj} />。

您定义了obj，但从未在任何地方使用它。当程序呈现table类并尝试呈现TableRow时，它会使用data属性传递数据。但是您正在使用this.props.data传递数据，那里没有它的数据，因此，当TableRow尝试应用map函数时，它将遇到异常

Answer 2

您很可能不会像Table那样将数组向下传递到data中。

Table组件应在App.js或您使用它的位置进行设置：

class App extends Component {
  render() {
    return (
      <div className="App">
        <Table data={[1,5,6,etc. . .]} /> \\data has an array of whatever values you care for.
      </div>
    );
  }
}

之后，您还将遇到另一个问题，因为您不应该在data = this.props中设置TableRow。应该像这样将data设置为this.props.data：

const {
        data
    } = this.props.data;

React JS-呈现表时错误无法读取未定义的属性“ map”

2 个答案: