React / PrimeReact 应用程序未使用 JSON 从 Web 服务呈现数据表内容

Question

请注意，我是 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 的新手，我不知道为什么显示不正确。

我对组件本身构建的数据进行了同样的尝试，它显示了多行（参见下面的来源）。

问题:

我做错了什么？

请注意，控制台正确打印了从另一台服务器获取的数据。 ‍♂️

-> PS：您可以在此处查看完整代码：https://github.com/kawoolutions/basketball-stats-primereact/

Answer 1

您可以尝试这样的操作：

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;

所以我们可以在PersonManager组件的状态下保存entities一个初始值。由于构造函数在组件安装和渲染之前运行，我们可以安全地访问 render.

中的 this.state.entities

在 class-based 组件中，我们可以使用 re-renders 组件的 this.setState 调用更新部分状态（在本例中为 entities）。这样组件就可以正确反映组件的当前状态。

React / PrimeReact 应用程序未使用 JSON 从 Web 服务呈现数据表内容

React / PrimeReact app not rendering datatable content from web service using JSON

javascript

json

reactjs

web-services

primereact