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

Question

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

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

还有可能将图形呈现为数据 table 中的 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 并在数据 table 中显示？

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

提前致谢。

Answer 1

我怀疑这是因为 jquery 在 React 之外运行，而您的子组件仅在挂载时设置 table。当父级使用 data 设置状态时，子级会看到道具更新并重新呈现 <p>{this.props.data}</p>，但 <table /> 不会更新其数据。如果将jquery逻辑重构为效用函数，调用tableincomponentDidMountandupdatetablein[=15] =] 道具更新，您可以利用组件生命周期函数来更新 <table /> 数据。

使用此 Link 这是一个如何更新 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?

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

Array data not rendering in data table using this.props - ReactJS

javascript

reactjs

csv

chart.js

papaparse