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

Question

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

在这里，我使用 Jquery 数据表在 Web 中呈现 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} />

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

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

提前致谢。

Answer 1

我怀疑这是因为 jquery 在 react 之外运行，而您的子组件仅在安装时设置表。 当父级使用data设置状态时，子级会看到道具更新并重新渲染<p>{this.props.data}</p> ，但<table />不会更新其数据。 如果将jquery逻辑重构为实用函数，并调用componentDidMount的set data table和componentDidUpdate props update中的update table，就可以利用组件生命周期函数来更新<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 之类的东西？