问题描述
当心,我是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/
解决方法
您可以尝试以下操作:
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
),以重新提供组件。这样,组件可以正确反映组件的当前状态。