将形式数据推向React中的数组

Question

我在React应用程序的页面上呈现了一些解析的CSV数据，我想添加一个表格，在提交时将输入推到其末尾。

我设法获得了一个表格，该表单以JSON的形式返回一个警报，但到目前为止无法将其推到数组的末端。

我是新手，只是想在我需要的时候学习它，因为我需要它来进行一个项目，但要抓住它确实很麻烦。

我的整个代码看起来像这样：

import React, { useState, useEffect, push } from "react";
import "./App.css";
import Papa from 'papaparse';
import data from './RentFlagDB.csv'
import { Formik } from 'formik';
import { useFormik } from 'formik';


export default function Archive () {

    const [parsedCsvData, setParsedCsvData] = useState([]);
    useEffect(() => {
        async function getData() {
            const response = await fetch("./RentFlagDB.csv");
            const reader = response.body.getReader();
            const result = await reader.read(); // raw array
            const decoder = new TextDecoder("utf-8");
            const csv = decoder.decode(result.value); // the csv text
            const results = Papa.parse(csv, { header: true, }); // object with { data, errors, meta }
            const rows = results.data; // array of objects
            setParsedCsvData(rows);
        }
        getData();
    }, []);
    return (
        <div className="Archive">
            <table className="ArchiveTable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                        <th>Postcode</th>
                        <th>Issue</th>
                        <th>Date</th>
                        <th>Score</th>
                    </tr>
                </thead>
                <tbody>
                    {parsedCsvData &&
                        parsedCsvData.map((parsedData, index) => (
                            <tr key={index}>
                                <td>{parsedData.Name}</td>
                                <td>{parsedData.Address}</td>
                                <td>{parsedData.Postcode}</td>
                                <td>{parsedData.Issue}</td>
                                <td>{parsedData.Date}</td>
                                <td>{parsedData.Score}</td>
                            </tr>
                        ))}
                </tbody>
            </table>
        </div>
    );
    const SignupForm = () => {

      const formik = useFormik({
        initialValues: {
          Username: '',
          Address: '',
          Postcode: '',
          Details: '',
          Score: '',
        },
        onSubmit: values => {
          alert(JSON.stringify(values, null, 2));
        },
      });
      return (
        <form onSubmit={formik.handleSubmit}>
          <label htmlFor="Username">Username</label>
          <input
            id="Username"
            name="Username"
            type="text"
            onChange={formik.handleChange}
            value={formik.values.Username}
            onSubmit= {() => {push.getElementByID("Username"); }}
          />

          <label htmlFor="Address">Address</label>
          <input
            id="Address"
            name="Address"
            type="textarea"
            onChange={formik.handleChange}
            value={formik.values.Address}
            onSubmit={() => { push.getElementByID("Address"); }}
          />

          <label htmlFor="Postcode">Postcode</label>
          <input
            id="Postcode"
            name="Postcode"
            type="text"
            onChange={formik.handleChange}
            value={formik.values.Postcode}
            onSubmit= {() => { push.getElementByID("Postcode"); }}
          />
          <label htmlFor="Details">Details</label>
          <input
            id="Details"
            name="Details"
            type="textarea"
            onChange={formik.handleChange}
            value={formik.values.Details}
            onSubmit= {() => { push.getElementByID("Details!"); }}
          />
          <label htmlFor="Score">Score</label>
          <input
            id="Score"
            name="Score"
            type="number"
            onChange={formik.handleChange}
            value={formik.values.Score}
            onSubmit= {() => {push.getElementByID("Score"); }}
          />

          <button type="submit">Submit</button>

        </form>
      );
    };

  }

我认为需要更改看起来像这样的位，尽管我很可能错了：

      onSubmit: values => {
          alert(JSON.stringify(values, null, 2));
        },
      });
      return (
        <form onSubmit={formik.handleSubmit}>

Answer 1

要将值推到parsedcsvdata的末尾，您可以尝试：

const formik = useFormik({
  onSubmit: values => {
    setParsedCsvData([...parsedCsvData, values]);
  },
});

顺便说一句，您无需明确使用onChange和value 使用formik，因为它使用反应上下文来完成引擎盖下的所有魔术。因此，您可以删除这些。另外，我不确定所有这些onsubmit对表单输入的处理程序，目的是什么？

如果您使用useformik挂钩，则可以使用formikprovider将表单包装：

<FormikProvider value={formik}>
  <Form>
    ...
  </Form>
</FormikProvider>