[数组数据未使用this.props-ReactJS在数据表中呈现

Question

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

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

还可以在数据表中将图形呈现为defaultContent API选项吗？请参阅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} />

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

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

提前感谢。

Answer 1

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

使用此Link，这是an如何更新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？