0

注意してください、私は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/

4

1 に答える 1