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

当心,我是 ReactJS 和 PrimeReact 的新手。我正在尝试构建一个页面,显示人员列表、从另一个 Java 后端服务器提取的数据。

首先,这是 JSON 数据:

http://img.mukewang.com/63ef4eee0001612c06051289.jpg

这是我的 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) 中,它看起来像下面这样:

http://img4.mukewang.com/63ef4f090001cb6b14411296.jpg

我对这个 ReactJS / PrimeReact 东西很陌生,我不知道为什么它不能正确显示。

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

问题

我究竟做错了什么?

请注意,控制台正确打印从其他服务器获取的数据。🤷‍♂️


慕运维8079593
浏览 137回答 1
1回答

holdtom

你可以尝试这样的事情:class PersonManager extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {entities: []};&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; const url = 'http://localhost:8080/bbstats/ws/person/findall';&nbsp; &nbsp; fetch(url)&nbsp; &nbsp; &nbsp; .then((response) => response.json())&nbsp; &nbsp; &nbsp; .then((data) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({entities: data});&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .catch(console.log);&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div style={{maxWidth: 1440, marginLeft: 'auto', marginRight: 'auto'}}>&nbsp; &nbsp; &nbsp; &nbsp; <DataTable value={this.state.entities}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Column field="id" header="ID" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Column field="lastName" header="Last Name" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Column field="firstName" header="First Name" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Column field="incognito" header="Incognito" />&nbsp; &nbsp; &nbsp; &nbsp; </DataTable>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default PersonManager;所以我们可以entities在组件的状态中保存PersonManager一个初始值。由于构造函数在组件安装和渲染之前运行,我们可以安全地访问this.state.entities内部render。在基于类的组件中,我们可以通过调用重新渲染组件来更新部分状态(entities在本例中) 。this.setState这样组件就可以正确反映组件的当前状态。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript