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

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

这里，我使用Jquery数据表在web中呈现CSV数据。问题是我无法使用this.props呈现数据表中的数据。 此问题已由@drew reese解决

也可以在数据表中将图形呈现为DefaultContentAPI选项吗？请参阅第二部分

这就是我要尝试的

第一部分：

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

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

---

提前感谢。

我怀疑这是因为jquery在react之外运行，而您的子组件仅在挂载时设置表。当父级使用数据设置状态时，子级会看到prop更新并重新渲染{this.props.data}

，但不会更新其数据。如果将jquery逻辑重构为实用程序函数，并在componentDidMount中调用set数据表，在componentDidUpdate props update中调用update表，则可以利用组件生命周期函数来更新数据

这是一个如何更新数据表的示例

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();
  }
}

---

问题：为什么不使用更具反应性的方式呈现数据？类似于？

更改挂钩是否会更改componentDidMount而不是componentWillMount？我将componentWillMount更改为componentDidMount。数据表仍然为空。您是说this.props.data未在元素中呈现吗？或者是，而表没有按预期呈现jquery数据？this.props.data是数据表的数据。我通过将数据放在数据表和p标记中进行检查。这两种方法实际上都不起作用。太棒了，这是我怀疑需要补充的。取消隐藏我的答案。使用此方法时，数据表中没有数据。我得到一个错误，setDataTable未定义。因此，我尝试在构造函数中设置this.setDataTable=this.setDataTable.bindthis。但数据表中仍然没有数据。此外，数据表还会创建一条错误消息，即无法重新初始化该表。早些时候，我能够使用componentDidUpdate呈现该表。@Musthafa啊，它是一个实例函数，因此将作为更新后的this.setDataTable进行访问。它也是一个arrow函数，所以不需要在构造函数中将它绑定到它。关于初始化或重新初始化DataTable，我不确定，但可以尝试一些关于更新数据的快速研究，以改进我的答案。我怀疑在更新时不需要列。是的，这是在react组件中呈现数据表的一种很好的方法。我们可以很容易地用最新的数据重新呈现表格。到目前为止，重新初始化没有问题。我会检查更新数据。我还试图在其中一列中呈现一个图形。可能吗？我得到一个错误[object]。无论如何，谢谢你的回答更新。

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

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();
  }
}