Reactjs 如何在MDB表中插入DB中的数据？

我是React的新手，我必须为我的DB创建一个CRUD表。 我创建了一个简单的表，如您所见：

class ListPromoCatalog extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            promos: [],
            message: null
        };
        this.refreshPromo = this.refreshPromo.bind(this)
    }

    componentDidMount() { //React defines a component lifecycle
        this.refreshPromo();
    }

    refreshPromo() {
        PromoCatalogService.retrieveAllPromo(PRIZES)//this would make the call to the REST API.
            .then(
                response => {
                    console.log(response);
                    this.setState({promos: response.data.viaggio})
                }
            )
    }

    PromoOffClicked(id) {
        PromoCatalogService.promoOff(PRIZES, id)
            .then(
                response => {
                    console.log(response);
                    this.setState({message: `Promo ${id} OFF  Successful`});
                    this.refreshPromo();
                }
            )

    }

    updatePromoClicked(id) {
        console.log('update ' + id);
        this.props.history.push(`/promos/${id}`);
    }

    addCourseClicked() {
        this.props.history.push(`/promos/-1`);
    }

    render() {
        return (
            <div className="container">
                <h3>All Promo</h3>
                <div className="row">
                    <FileUploader/>
                </div>
                {this.state.message && <div className="alert alert-success">{this.state.message}</div>}

                <div className="container">
                    <table className="table">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Item</th>
                            <th>Title</th>
                            <th>Description</th>
                            <th>Delete</th>
                            <th>Update</th>

                        </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.promos.map(
                                promo =>
                                    <tr key={promo.promoId}>
                                        <td>{promo.promoId}</td>
                                        <td>{promo.ijCod}</td>
                                        <td>{promo.title}</td>
                                        <td>{promo.description}</td>
                                        <td>
                                            <button className="btn btn-warning"
                                                    onClick={() => this.PromoOffClicked(promo.promoId)}>OFF
                                            </button>
                                        </td>
                                        <td>
                                            <button className="btn btn-success"
                                                    onClick={() => this.updatePromoClicked(promo.promoId)}>Update
                                            </button>
                                        </td>
                                    </tr>
                            )
                        }
                        </tbody>
                    </table>
                    <div className="row">
                        <button className="btn btn-success" onClick={this.addCourseClicked}>Add</button>
                    </div>
                </div>
            </div>
        )
    }
}

export default ListPromoCatalog

类ListPromoCatalog扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
宣传片：[]，
消息：空
};
this.refreshPromo=this.refreshPromo.bind（this）
}
componentDidMount（）{//React定义组件生命周期
这个。refreshPromo（）；
}
refreshPromo（）{
PromoCatalogService.retrieveAllPromo（奖品）//这将调用RESTAPI。
.那么(
响应=>{
控制台日志（响应）；
this.setState（{promos:response.data.viaggio}）
}
)
}
促销员（id）{
PromoCatalogService.promoOff（奖品，id）
.那么(
响应=>{
控制台日志（响应）；
this.setState（{message:`Promo${id}OFF Successful`}）；
这个。refreshPromo（）；
}
)
}
updatePromoClicked（id）{
console.log（'update'+id）；
this.props.history.push（`/promos/${id}`）；
}
addCourseClicked（）{
this.props.history.push（`/promos/-1`）；
}
render（）{
返回(
所有宣传片
{this.state.message&&{this.state.message}
身份证件
项目
标题
描述
删除
更新
{
这个.state.promos.map(
促销=>
{promo.promoId}
{promo.ijCod}
{promo.title}
{promo.description}
this.PromoOffClicked（promo.promoId）}>OFF
this.updatePromoClicked（promo.promoId）}>Update
)
}
添加
)
}
}
导出默认列表目录

我想对材质表做同样的事情，但我不知道如何在我的新类中放置数据和方法

    render() {
        return (
            <>
                <PanelHeader size="sm"/>
                <div className="content">
                    <Row>
                        <Col xs={12}>
                            <Card>
                                <CardHeader>
                                    <CardTitle tag="h4">Simple Table</CardTitle>
                                </CardHeader>
                                <CardBody>
                                    <MDBDataTable
                                        striped
                                        bordered
                                        small
                                        data={data} //DATA SHOULD CONTAIN HEADERS AND COLUMNS
                                    />
                                </CardBody>
                            </Card>
                        </Col>
                    </Row>
                </div>
            </>
        );
    }

我想对材质表做同样的事情，但我不知道如何在我的新类中放置数据和方法

    render() {
        return (
            <>
                <PanelHeader size="sm"/>
                <div className="content">
                    <Row>
                        <Col xs={12}>
                            <Card>
                                <CardHeader>
                                    <CardTitle tag="h4">Simple Table</CardTitle>
                                </CardHeader>
                                <CardBody>
                                    <MDBDataTable
                                        striped
                                        bordered
                                        small
                                        data={data} //DATA SHOULD CONTAIN HEADERS AND COLUMNS
                                    />
                                </CardBody>
                            </Card>
                        </Col>
                    </Row>
                </div>
            </>
        );
    }

render（）{
返回(
简表
);
}

你找到解决方案了吗？我也有同样的问题你找到解决办法了吗？我也有同样的问题