Данные массива не отображаются в таблице данных с использованием this.props - ReactJS - PullRequest
Новая
       21

Данные массива не отображаются в таблице данных с использованием this.props - ReactJS

0 голосов
/ 18 марта 2020

У меня есть два реагирующих компонента. В котором один из компонентов обрабатывает данные CSV с использованием Papa Parse, а другой обрабатывает таблицу данных. Я использую первый компонент для анализа и отправки данных во второй компонент, используя this.props.

Здесь я использую таблицу данных Jquery для визуализации данных CSV в сети. Проблема в том, что я не могу отобразить данные в таблице данных с помощью this.props. (эта проблема была решена @ drew-reese)

Также возможно ли отобразить график как параметр API DefaultContent в таблице данных? Пожалуйста, обратитесь к second component.

Вот что я пытаюсь,

First component:

var output = [];
class Tables extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
          data: []
        }
      this.updateData = this.updateData.bind(this);
    }
    componentWillMount() {

      var csvFilePath = require("../data/input.csv");
      Papa.parse(csvFilePath, {
        header: true,
        download: true,
        skipEmptyLines: true,
        complete: this.updateData
      });
    }
    updateData(result) {
      output = result.data;
      output = output.map(obj => Object.values(obj));
      console.log(output) //this works
    this.setState({data: output})    
    }
    render() { 
        return(
            <div>
                <Charts data={this.state.data}/>
            </div>
        )
    }
  }
  export default Tables;

Second comp

import { Line } from 'react-chartjs-2';
const $ = require('jquery')
$.DataTable = require('datatables.net');
class Charts extends React.Component {

    componentDidMount() {
        console.log(this.el);
        this.$el = $(this.el)
        this.$el.DataTable({
            data: this.props.data,
            columns: [
                { title: "heading" },
                { title: "heading" },
                { title: "heading " },
                { title: "heading " },
                { title: " heading",\
                  defaultContent: <Line /> #chartjs graph
                 },
            ]
        })
    }
    componentWillUnmount() {
    }
    render() {
        return (
            <div>
                <table className="display" width="100%" ref = {el => this.el = el }></table>
                <p>{this.props.data}</p>
            </div>
        );
    }
}

//ChartJS line graph
<Line
    data={data}
    options={options} />

Я пытался отобразить те же данные внутри тега AP, но не работает. На самом деле я не могу передать данные из одного компонента в другой. Любые идеи? Должен ли я использовать любой асин c или что-то. Или есть ли лучший способ для анализа CSV и отображения в таблице данных?

Можно ли визуализировать диаграмму внутри одного из столбцов таблицы данных? Пожалуйста, обратитесь к последнему столбцу и разделу defaultContent API.

Заранее спасибо.

1 Ответ

1 голос
/ 19 марта 2020

Я подозреваю, что это потому, что jquery работает вне реакции и ваш дочерний компонент устанавливает таблицу только при монтировании. Когда родитель устанавливает состояние с помощью data, ребенок видит обновление реквизита и перерисовывает <p>{this.props.data}</p>, но <table /> не обновляет свои данные. Если вы реорганизуете jquery logi c в служебные функции и вызываете установленную таблицу данных в componentDidMount и таблицу обновлений в componentDidUpdate props update, вы можете воспользоваться функциями жизненного цикла компонента, чтобы обновите данные <table />.

Используя эту ссылку , это пример того, как ваш DataTable может быть обновлен. 

setDataTable = () => {
  this.$el = $(this.el);
  this.$el.DataTable({
    data: this.props.data,
    columns: [
      { title: "heading" },
      { title: "heading" },
      { title: "heading " },
      { title: "heading " },
      { title: " heading" },
    ]
  });
}

updateDataTable = () => {
  const table = $(this.el).DataTable();

  // logic to update table with updated data
  table.clear();
  table.rows.add(this.props.data);
  table.draw();
};

componentDidMount() {
  console.log(this.el);
  this.setDataTable();
}

componentDidUpdate(prevProps) {
  console.log(this.el);
  if (prevProps.data !== this.props.data) {
    this.updateDataTable();
  }
}

Вопрос Почему бы не использовать более оперативный способ рендеринга ваших данных? Что-то вроде MUI-Datatables ?

...