Arrays React将数据推送到数组的对象中

如何将导入的数据从importFile.js获取到dataTable.js

尝试使用此函数将导入数据中的嵌套数组从importFile.js更改为数组对象

const newArray = [data].map(
  ([firstName, lastName, issueCount, dateOfBirth]) => ({
    firstName,
    lastName,
    issueCount,
    dateOfBirth
  })
);

然后使用以下工具推送到dataTable.js：

data.rows.push(newArray);

在React中，正确的方法是什么

预期结果是获取导入的数据，以显示在此表中：

---

您要做的是使DataTable组件成为Reader组件的子组件。对于datatable组件中datatable的rows属性，需要Reader组件中的object数组。正如你所说的，你是一个初学者，所以最好从反应挂钩开始，因为它很容易

读卡器组件

import React, {useState} from "react";
import CSVReader from "react-csv-reader";
import DatatablePage from "./dataTable";
import "../index.css";

const Reader = () =>  { 
 const [data, setData] = useState([]);
return (
  <div className="container">
    <CSVReader
      cssClass="react-csv-input"
      label="Upload a new CSV file"
      onFileLoaded={(data) => setData(data)}
    />
    <DatatablePage uploadedData={data} />
  </div>
);
}

export default Reader;

import React from "react";
import { MDBDataTable } from "mdbreact";

const DatatablePage = ({uploadedData}) => {
  const data = {
    columns: [
      {
        label: "First Name",
        field: "name",
        sort: "asc",
        width: 150
      },
      {
        label: "Last Name",
        field: "surname",
        sort: "asc",
        width: 270
      },
      {
        label: "Issue count",
        field: "issuecount",
        sort: "asc",
        width: 200
      },
      {
        label: "Date of birth",
        field: "dateofbirth",
        sort: "asc",
        width: 100
      }
    ],
    rows: []
  };
// we append the passed props in the rows. read about spread operator if unaware of it.

const datatableProps = {...data, rows: uploadedData}; 
  return <MDBDataTable striped bordered hover uploadedData={uploadedData} data={datatableProps} />;
};

export default DatatablePage;

import React，{useState}来自“React”；
从“react csv reader”导入CSVReader；
从“/dataTable”导入DatatablePage；
导入“./index.css”；
常量读取器=（）=>{
const[data，setData]=useState（[]）；
返回(
setData（数据）}
/>
);
}
导出默认读取器；

DatatablePage组件

import React, {useState} from "react";
import CSVReader from "react-csv-reader";
import DatatablePage from "./dataTable";
import "../index.css";

const Reader = () =>  { 
 const [data, setData] = useState([]);
return (
  <div className="container">
    <CSVReader
      cssClass="react-csv-input"
      label="Upload a new CSV file"
      onFileLoaded={(data) => setData(data)}
    />
    <DatatablePage uploadedData={data} />
  </div>
);
}

export default Reader;

import React from "react";
import { MDBDataTable } from "mdbreact";

const DatatablePage = ({uploadedData}) => {
  const data = {
    columns: [
      {
        label: "First Name",
        field: "name",
        sort: "asc",
        width: 150
      },
      {
        label: "Last Name",
        field: "surname",
        sort: "asc",
        width: 270
      },
      {
        label: "Issue count",
        field: "issuecount",
        sort: "asc",
        width: 200
      },
      {
        label: "Date of birth",
        field: "dateofbirth",
        sort: "asc",
        width: 100
      }
    ],
    rows: []
  };
// we append the passed props in the rows. read about spread operator if unaware of it.

const datatableProps = {...data, rows: uploadedData}; 
  return <MDBDataTable striped bordered hover uploadedData={uploadedData} data={datatableProps} />;
};

export default DatatablePage;

从“React”导入React；
从“mdbreact”导入{MDBDataTable}；
常量DatatablePage=（{uploadedData}）=>{
常数数据={
栏目：[
{
标签：“名字”，
字段：“名称”，
排序：“asc”，
宽度：150
},
{
标签：“姓氏”，
字段：“姓氏”，
排序：“asc”，
宽度：270
},
{
标签：“发行数量”，
字段：“issuecount”，
排序：“asc”，
宽度：200
},
{
标签：“出生日期”，
字段：“出生日期”，
排序：“asc”，
宽度：100
}
],
行：[]
};
//我们将传递的道具附加到行中。如果不知道，请阅读有关spread运算符的内容。
const datatableProps={…数据，行：uploadedData}；
返回；
};
导出默认数据表页面；

---

我们使用创建一个名为data的状态变量和它的setter。然后我们将这个状态变量传递给子组件，子组件可以渲染它。

为什么要映射到刚刚创建的单个元素数组上？！Hi@jonrsharpe这是为了将嵌套数组转换为ObjectsHank@Kamlesh数组，但不幸的是，这会在上传文件后破坏表中的排序功能。如何在React应用程序中修复此问题？