在React中將表單資料推送到陣列中

我在 React App 的頁面上呈現了一些決議的 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}>

uj5u.com熱心網友回復：

要將值推到 的末尾parsedCsvData，您可以嘗試：

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

順便說一句，你不需要顯式地使用onChangeandvalue和 formik，因為它使用 React Context 完成了所有的魔法。所以你可以洗掉這些。另外，我不確定所有這些onSubmit用于表單輸入的處理程式，目的是什么？

如果你使用useFormik鉤子，你可以FormikProvider像這樣包裝你的表單：

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

標籤：javascript 节点.js 反应 反应式 形式

上一篇：從另一個模型更改字串

下一篇：在導航容器內的堆疊之間導航