注意してください、私はReactJSとPrimeReactを初めて使用します。人のリスト、別の Java バックエンド サーバーから取得したデータを表示するページを作成しようとしています。
まず、JSON データは次のとおりです。
ここに私のindex.jsがあります:
import React from 'react';
import ReactDOM from 'react-dom';
import PersonManager from './PersonManager';
import './index.css';
ReactDOM.render(<PersonManager />, document.getElementById('root'));
ご覧のとおりPersonManager.js
、実際のコンテンツを表示するために呼び出しています。
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 データテーブルは空のままです。
私のブラウザ (FF) では、次のように表示されます。
私はこの ReactJS / PrimeReact にまったく慣れていないので、なぜこれが正しく表示されないのかわかりません。
複数の行を表示するコンポーネント自体で構築されたデータで同じことを試しました(以下のソースを参照)。
質問:
私は何を間違っていますか?
コンソールは、他のサーバーから取得したデータを正しく出力することに注意してください。♂️</p>
-> PS: ここで完全なコードを調べることができます: https://github.com/kawoolutions/basketball-stats-primereact/