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 东西很陌生，我不知道为什么它不能正确显示。我对组件本身构建的数据进行了同样的尝试，它显示多行（参见下面的来源）。问题：我究竟做错了什么？请注意，控制台正确打印从其他服务器获取的数据。🤷‍♂️

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;

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

在基于类的组件中，我们可以通过调用重新渲染组件来更新部分状态（entities在本例中） 。this.setState这样组件就可以正确反映组件的当前状态。