#

 

Das Anzeigen von Daten aus einer Datenbank in React ist clientseitig echt einfach. Wenn man weiß wie es geht.

In 5 Schritten wird ein Datensatz in React angezeigt.

 

import React, { Component } from 'react';

 

export class Article extends Component {

    //0.define local react variables

    constructor(props) {

        super(props);

        this.state = {

            idarticle: 0,

        }

    }

 

    //1.when page is loaded, load call data

    componentDidMount() {

        //1b.get ID from URL

        this.populateData(this.props.match.params.id);

    }

 

    //*2.load data from api

    async populateData(id) {

        //3.get data as json

        const response = await fetch('api/articles/' + id);  

        const data = await response.json();            

        this.setState(state => ({

             //4.write to local react-state-variables

            idarticle   :data.idArticle,

        }));

    }

 

    //*5.render React HTML

    render() {

        return (

            <div >

            <p>IDArticle:{this.state.idarticle}</p>

            </div>

        );

    }

}

 

 

 

 

React Beispiel Code, CRUD (R Read)

 

React Code

import React, { Component } from 'react';

import './Article.css';

import "bootstrap/dist/css/bootstrap.min.css";

 

 

export class Article extends Component {

    //--------< component: Article >--------

 

    //----< compontent >----

    static displayName = Article.name;

 

    constructor(props) {

        //-< react: parameter >

        super(props);

        //-</ react: parameter >

 

        //this.onSave = this.onSave.bind(this);

        //this.onNew = this.onNew.bind(this);

 

        //--< react: variables >--

        this.state = {

            idarticle: 0,

            loading: true,

            IDUser: "",

            title: "",

            TextContent: "",

            HtmlContent: "",

            Folder: "",

            Keywords: "",

            nImages: "",

            nVideos: "",

            nFiles: "",

            DtCreated: "",

            DtEdit: ""

        }

    }

 

    //--< component.events >--

    componentDidMount() {

        this.populateData(this.props.match.params.id);

    }

    //--</ component.events >--

    //----</ compontent >----

 

 

    //====< functions >====

 

    //*load data from web api

    async populateData(id) {

        //--------< populateData() >--------

        const response = await fetch('api/articles/' + id);   //*get web_data from web api as json-string

        const data = await response.json();             //*convert json to data

        //console.log("this.state=" + this.state);

        //console.log(this.state);

 

        this.setState(state => ({

            idarticle   :data.idArticle,

            iduser      :data.idUser,

            title       :data.title,

            textcontent :data.textContent,

            htmlcontent :data.htmlContent,

            folder      :data.folder,

            keywords    :data.keywords,

            nimages     :data.nImages,

            nvideos     :data.nVideos,

            nfiles      :data.nFiles,

            dtcreated   :data.dtCreated,

            dtedit      :data.dtEdit,

            loading: false

        })); //*refresh state of arcticles

        //--------</ populateData() >--------

    }

    //====</ functions >====

 

 

    //{this.state.idarticle}

 

 

    //====< HTML >====

    //*set root hmtl, load data, fill data

    render() {

        //--------< render(HTML) >--------

        return (

            //----< return >----

            <div className="submit-form">

                {

                    this.state.loading ?

                        (

                            //--< IsLoading >--

                            <p>loading..</p>

                            //--</ IsLoading >--

                        )

                        :

                        (

                            //--< IsLoaded >--

                            <div>

                                <p>IDArticle:{this.state.idarticle}</p>

                                <p>Title{this.state.title}</p>

                                <p>IDUser{this.state.iduser}</p>

                                <p>TextContent{this.state.textcontent}</p>

                                <p>Folder{this.state.folder}</p>

                                <p>Keywords{this.state.keywords}</p>

                                <p>Date:{this.state.dtcreated}</p>

                            </div>   

                            //--</ IsLoaded >--

                        )

                }

            </div>

            //----</ return >----

        );

        //--------</ render(HTML) >--------

    }

    //====</ react: render >====

 

 

    //====</ HTML >====

 

 

    //--------</ component: Articles >--------

}

 

 

 

Mobile

.