Реагировать на передачу данных в объект массивов - PullRequest
2 голосов
/ 08 июня 2019

Как получить импортированные данные из 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 /

1 Ответ

0 голосов
/ 08 июня 2019

Что вы хотите сделать, так это сделать компонент DataTable дочерним по отношению к компоненту Reader. Вам нужен массив объектов из компонента Reader для свойствах строк данных в компоненте DataTable. Как вы сказали, вы новичок, поэтому лучше начинать с ловушек реагирования, поскольку это легко.

Компонент считывателя

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;

Мы используем ответные ловушки , чтобы создать переменную состояния с именем data и установщик для нее. Затем мы передаем эту переменную состояния дочернему компоненту, который может ее отобразить.

...