将表单数据推送到 React 中的数组

Question

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

我已经设法得到一个表单 returns 一个输入为 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]);
  },
});

顺便说一句，你不需要明确地使用 formik 的 onChange 和 value，因为它使用 React Context 在幕后完成了所有的魔法。所以你可以删除这些。另外，我不确定所有这些 onSubmit 表单输入处理程序，目的是什么？

如果你使用 useFormik 钩子，你可以像这样用 FormikProvider 包裹你的表单：

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

将表单数据推送到 React 中的数组

Pushing form data onto an array in React

javascript

node.js

reactjs

react-native

formik