javascript - 使用 Material-ui 传递数据以显示表信息时出错

Question

如果您能帮助我解决我的问题，我将不胜感激。我编写了一个组件来演示数组的信息，其中包括index.js 和TableData.js 文件。将数组信息从 index.js 传输到 TableData.js 以演示它们，我遇到了一个不明确的错误。

我的代码有什么问题？我在哪一部分犯了错误？

index.js

import React from "react";
import ReactDOM from "react-dom";
import TableData from "./TableData";

const LP = [
  { id: 11, name: "CD", price: "2000", describe: "Educational" },
  { id: 24, name: "Pen", price: "3500", describe: "Design" },
  { id: 83, name: "Pencil", price: "2500", describe: "Design" }
];

ReactDOM.render(<TableData rows={LP} />, document.getElementById("root"));

TableData.js

import React, {component} from 'react';

import {makeStyles} from '@material-ui/core/styles';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow
} from '@material-ui/core';


//****** Style CSS ******
const useStyles = makeStyles({
    root: {
        width: '100%',
        overflowX: 'auto'
    },
    table: {
        minWidth: 650
    }
});

const classes = useStyles();
const test = 'right';

//****** Class List Product ******

class TableData extends component{
    state = {
        items: this.props,
    }

    render() {
        return (
            <Table className={classes.table} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        <TableCell>Name Product</TableCell>
                        <TableCell align="right">Price</TableCell>
                        <TableCell align="right">Describe</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {items.map((item, index) => (
                        <TableRow key={item.id}>
                            <TableCell component="th" scope="row">
                                {item.name}
                            </TableCell>
                            <TableCell align={test} data={item.name}>{item.price}</TableCell>
                            <TableCell align="right">{item.describe}</TableCell>
                            <TableCell align="right">
                                <button>
                                    DEL
                                </button>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        )
    }

    export
    default
    TableData

Answer 1

我相信您在

之前缺少一个右括号 }

export
    default
    TableData

还有当你{items.map((item, index) => (

应该是{this.state.items.map((item, index) => (