数组数据未使用this.props在数据表中呈现-ReactJS [英] Array data not rendering in data table using this.props - ReactJS

问题描述

我有两个反应成分.其中一个组件使用Papa Parse处理CSV数据，另一个组件呈现数据表.我正在使用第一个组件来解析，并使用this.props将数据发送到第二个组件.

I have two react components. In which one of the components processes the CSV data using Papa Parse and another one renders the data table. I am using the first component to parse and send the data to the second component using this.props.

在这里，我正在使用Jquery数据表在网络中呈现CSV数据.问题是我无法使用this.props在数据表中呈现数据.(此问题已通过@ drew-reese解决)

Here, I'm using the Jquery data table to render the CSV data in the web. Problem is I'm unable to render the data inside the data table using this.props. (this issue has been resolved by @drew-reese)

是否还可以在数据表中将图形呈现为defaultContent API选项?请参考第二部分.

Also is it possible to render graph as defaultContent API option in data table? Please refer to second component.

这是我正在尝试的东西，

Here Is What I'm trying,

第一个组件:

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;

第二个补偿

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} />

我试图在p标签内显示相同的数据，但是不起作用.实际上，我无法将数据从一个组件传递到另一个组件.有任何想法吗?我是否必须使用任何异步或其他方法.还是有更好的方法来解析csv并在数据表中显示?

I have tried to display the same data inside a p tag, but not working. Actually i'm unable to pass the data from one component to another. Any ideas? Do I have to use any async or something. Or is there any better way to parse csv and display in a data table?

是否可以在数据表的某一列内绘制图表?请参阅最后一列和defaultContent API部分.

Is it possible to render a chart inside one of the columns in the data table? Please refer to the last column and defaultContent API section.

谢谢.

推荐答案

我怀疑这是因为jquery在react之外运行，并且您的子组件仅在装入表时设置该表.当父母用 data 设置状态时，孩子会看到道具更新并重新渲染< p> {this.props.data}</p> ，但是<表/> 不会更新其数据.如果将jquery逻辑重构为实用程序函数，并在 componentDidMount 中调用set数据表，并在 componentDidUpdate 道具更新中调用更新表，则可以利用组件生命周期函数中的一个以获取更新的< table/> 数据.

I suspect it is because jquery operates outside of react and your child component only sets the table when it mounts. When the parent sets state with data the child sees the prop update and rerenders <p>{this.props.data}</p>, but the <table /> does not get its data updated. If you refactor the jquery logic into utility functions and call the set data table in componentDidMount and update table in componentDidUpdate props update, you can take advantage of the component lifecycle functions to get the <table /> data updated.

使用此链接这是如何更新您的DataTable的示例.

Using this Link this is an example of how your DataTable could be updated.

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数据表?

Question Why not use a more react way of rendering your data? Something like MUI-Datatables?

这篇关于数组数据未使用this.props在数据表中呈现-ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！