将数据推送到数组对象中

Question

如何将数据从 importFile.js 导入到 dataTable.js？

https://github.com/Romson/CSV-file-uploader/blob/master/src/components/importFile.js https://github.com/Romson/CSV-file-uploader/blob/master/src/components/dataTable.js

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

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

然后推入 dataTable.js：

data.rows.push(newArray);

在 React 中执行此操作的正确方法是什么？

预期结果是让导入的数据显示在此 table:

https://csv-file-uploader.herokuapp.com/

Answer 1

您要做的是使 DataTable 组件成为 Reader 组件的子组件。对于 DataTable 组件中数据表的行属性，您需要来自 Reader 组件的对象数组。正如您所说，您是初学者，所以最好从 React Hooks 开始，因为它很简单。

Reader分量

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;

DatatablePage 组件

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 hooks 创建一个名为 data 的状态变量，并为其创建一个 setter。然后我们将这个状态变量传递给可以渲染它的子组件。

将数据推送到数组对象中

React push data into object of arrays

arrays

object

import-from-excel

reactjs