时间戳

首页 > 解决方案 > React 将数据推送到数组对象中

arrays - React 将数据推送到数组对象中

问题描述

如何将 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 中执行此操作的正确方法是什么？

预期结果是让导入的数据显示在此表中：

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

标签： arraysreactjsobjectimport-from-excel

解决方案

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

阅读器组件

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

推荐阅读