第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React / PrimeReact 應(yīng)用程序不使用 JSON 從 Web 服務(wù)呈現(xiàn)數(shù)據(jù)表內(nèi)容

React / PrimeReact 應(yīng)用程序不使用 JSON 從 Web 服務(wù)呈現(xiàn)數(shù)據(jù)表內(nèi)容

慕運維8079593 2023-02-17 17:54:28
當(dāng)心,我是 ReactJS 和 PrimeReact 的新手。我正在嘗試構(gòu)建一個頁面,顯示人員列表、從另一個 Java 后端服務(wù)器提取的數(shù)據(jù)。首先,這是 JSON 數(shù)據(jù):這是我的 index.js:import React from 'react';import ReactDOM from 'react-dom';import PersonManager from './PersonManager';import './index.css';ReactDOM.render(<PersonManager />, document.getElementById('root'));如您所見,我正在調(diào)用PersonManager.js以顯示實際內(nèi)容:import React, { Component } from 'react';import { DataTable } from 'primereact/datatable';import { Column } from 'primereact/column';import 'primereact/resources/themes/nova/theme.css';import 'primereact/resources/primereact.min.css';import 'primeicons/primeicons.css';class PersonManager extends Component{    _entities = []    get entities()    {        return this._entities;    }    set entities(entities)    {        this._entities = entities;    }    setEntities(entities)    {        this._entities = entities;    }    componentDidMount()    {        const url = 'http://localhost:8080/bbstats/ws/person/findall';                fetch(url)            .then(response => response.json())            .then(data =>            {                // this._entities = data;                // this.setEntities(data);                this.setEntities(data);                console.log('This is your data', data);            })            .catch(console.log)    }    render()    {        return (            <div style={{ maxWidth: 1440, marginLeft: "auto", marginRight: "auto" }}>                <DataTable value={this._entities}>                    <Column field='id' header='ID' />                    <Column field='lastName' header='Last Name' />                    <Column field='firstName' header='First Name' />                    <Column field='incognito' header='Incognito' />                </DataTable>            </div>        );    }}export default PersonManager;但是,PrimeReact 數(shù)據(jù)表保持為空。在我的瀏覽器 (FF) 中,它看起來像下面這樣:我對這個 ReactJS / PrimeReact 東西很陌生,我不知道為什么它不能正確顯示。我對組件本身構(gòu)建的數(shù)據(jù)進(jìn)行了同樣的嘗試,它顯示多行(參見下面的來源)。問題:我究竟做錯了什么?請注意,控制臺正確打印從其他服務(wù)器獲取的數(shù)據(jù)。???♂?
查看完整描述

1 回答

?
holdtom

TA貢獻(xiàn)1805條經(jīng)驗 獲得超10個贊

你可以嘗試這樣的事情:


class PersonManager extends Component {

  constructor(props) {

    super(props);


    this.state = {entities: []};

  }


  componentDidMount() {

    const url = 'http://localhost:8080/bbstats/ws/person/findall';


    fetch(url)

      .then((response) => response.json())

      .then((data) => {

        this.setState({entities: data});

      })

      .catch(console.log);

  }


  render() {

    return (

      <div style={{maxWidth: 1440, marginLeft: 'auto', marginRight: 'auto'}}>

        <DataTable value={this.state.entities}>

          <Column field="id" header="ID" />

          <Column field="lastName" header="Last Name" />

          <Column field="firstName" header="First Name" />

          <Column field="incognito" header="Incognito" />

        </DataTable>

      </div>

    );

  }

}


export default PersonManager;

所以我們可以entities在組件的狀態(tài)中保存PersonManager一個初始值。由于構(gòu)造函數(shù)在組件安裝和渲染之前運行,我們可以安全地訪問this.state.entities內(nèi)部render。


在基于類的組件中,我們可以通過調(diào)用重新渲染組件來更新部分狀態(tài)(entities在本例中) 。this.setState這樣組件就可以正確反映組件的當(dāng)前狀態(tài)。


查看完整回答
反對 回復(fù) 2023-02-17
  • 1 回答
  • 0 關(guān)注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號