Javascript 使用物料界面传递数据以显示表格信息时出错

如果你能帮我解决这个问题，我将不胜感激。 我编写了一个组件来演示包含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"));

从“React”导入React；
从“react dom”导入react dom；
从“/TableData”导入TableData；
常数LP=[
{id:11，名称：“CD”，价格：“2000”，描述：“教育”}，
{id:24，名称：“笔”，价格：“3500”，描述：“设计”}，
{id:83，名称：“铅笔”，价格：“2500”，描述：“设计”}
];
render（，document.getElementById（“根”））；

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

import React，{component}来自'React'；
从'@material ui/core/styles'导入{makeStyles}；
进口{
桌子
表体，
TableCell，
桌面，
桌椅
}来自“@material ui/core”；
//******样式CSS******
const useStyles=makeStyles({
根目录：{
宽度：“100%”，
overflowX:'自动'
},
表:{
最小宽度：650
}
});
const classes=useStyles（）；
常量测试='正确'；
//******类列表产品******
类TableData扩展组件{
状态={
物品：这个。道具，
}
render（）{
返回(
名称产品
价格
描述
{items.map（（项，索引）=>(
{item.name}
{item.price}
{item.description}
德尔
))}
)
}
出口
违约
表格数据

只需将项目更改为项目。行

{items.rows.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>
                    ))}

{items.rows.map（（项，索引）=>(
{item.name}
{item.price}
{item.description}
德尔
))}

我相信您之前缺少一个结束括号

}

export
    default
    TableData

当你

{items.map（（项目，索引）=>（

应该是

---

{this.state.items.map（（项，索引）=>（

component

vs

component

感谢您的良好响应，我刚刚收到一个新错误。错误：钩子调用无效。钩子只能在函数组件主体内部调用。这可能是由于以下原因之一：1.React和渲染器的版本可能不匹配（例如React DOM）2.您可能违反了挂钩的规则3.您可能在进行挂钩调用的同一应用程序中有多个React副本，但不能在类组件中直接使用挂钩。请将类组件更改为Functional组件，或查看以下链接：@Iman