React Code: Anzeigen eines Datensatzes
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 >-------- }
|