时间戳

首页 > 解决方案 > 数组数据未使用 this.props 在数据表中呈现 - ReactJS

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

问题描述

我有两个反应组件。其中一个组件使用 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 部分。

提前致谢。

标签： javascriptreactjscsvchart.jspapaparse

解决方案

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

推荐阅读