reactjs - 如何将数据库中的数据插入到 MDB 表中？

Question

我是 React 的新手，我必须为我的数据库创建一个 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

我想对材料表做同样的事情，但我不知道如何将数据和方法放入我的新类中。

我想对材料表做同样的事情，但我不知道如何将数据和方法放入我的新类中。

    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>
            </>
        );
    }