Осторожно, я новичок в ReactJS и PrimeReact. Я пытаюсь создать страницу, которая показывает список людей, данные взяты с другого внутреннего сервера Java.

Во-первых, вот данные JSON:

enter image description here

Вот мой 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) это выглядит так:

enter image description here

Я новичок в этом материале ReactJS / PrimeReact, и я понятия не имею, почему это отображается неправильно.

Я пробовал то же самое с данными, созданными в самом компоненте, который показывает несколько строк (см. Источники ниже).

ВОПРОС :

Что я делаю не так?

Обратите внимание, что консоль правильно печатает данные, полученные с другого сервера. 🤷‍♂️

-> PS: вы можете проверить полный код здесь: https://github.com/kawoolutions /ball-stats-primereact /

0
Kawu 6 Сен 2020 в 11:29

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, который повторно визуализирует компонент. Таким образом, компонент правильно отражает текущее состояние компонента.

1
Bas van der Linden 6 Сен 2020 в 10:21