[英]React / PrimeReact app not rendering datatable content from web service using JSON
Beware, I'm all new to ReactJS and PrimeReact.当心,我是 ReactJS 和 PrimeReact 的新手。 I'm trying to build a page that shows a list of persons, data drawn from another, Java backend server.
我正在尝试构建一个页面,该页面显示人员列表以及从另一个 Java 后端服务器提取的数据。
First off, here's the JSON data:首先,这是 JSON 数据:
Here's my index.js:这是我的 index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import PersonManager from './PersonManager';
import './index.css';
ReactDOM.render(<PersonManager />, document.getElementById('root'));
As you can see, I'm calling PersonManager.js
to display the actual content:如您所见,我正在调用
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;
However, the PrimeReact datatable stays empty.但是,PrimeReact 数据表保持为空。
In my browser (FF) it looks like the following:在我的浏览器 (FF) 中,它如下所示:
I'm all new to this ReactJS / PrimeReact stuff and I have no idea why this doesn't display correctly.我对这个 ReactJS/PrimeReact 的东西很陌生,我不知道为什么这不能正确显示。
I tried the same with data constructed in the component itself, which shows multiple rows (see sources below).我对在组件本身中构建的数据进行了同样的尝试,它显示了多行(参见下面的来源)。
QUESTION :问题:
What am I doing wrong?我究竟做错了什么?
Note, that the console correctly prints the data fetched from the other server.请注意,控制台会正确打印从其他服务器获取的数据。 🤷♂️
🤷♂️
-> PS: you can inspect the full code here: https://github.com/kawoolutions/basketball-stats-primereact/ -> PS:您可以在此处查看完整代码: https : //github.com/kawoolutions/basketball-stats-primereact/
You can try something like this:你可以尝试这样的事情:
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;
So we can save entities
in the state of the PersonManager
component with an initial value.所以我们可以将
entities
保存在PersonManager
组件的状态中,并带有一个初始值。 Since the constructor runs before the component mounts and renders we can safely access this.state.entities
inside render
.由于构造函数在组件挂载和渲染之前运行,我们可以安全地访问
render
this.state.entities
。
In class-based components we can then update parts of the state ( entities
in this case) with a this.setState
call which re-renders the component.在基于类的组件中,我们可以使用重新渲染组件的
this.setState
调用更新部分状态(在本例中为entities
)。 This way the component correctly reflects the current state of the component.这样,组件正确地反映了组件的当前状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.