Reactjs formik 从数组中删除项目

Question

我的组件中有这些状态。

     const [initialValues, setInitialValues] = useState({
        name: "",
        name2: "",
        items: []
      });

name并name2组合在一起形成一个数组{name: 'sss', name2: 'sss'}并推送到该items数组。推动部分没问题。唯一的问题是谁删除该数组上的项目。

这是我的代码https://codesandbox.io/s/material-demo-forked-u2qzv?file=/demo.js:260-362

普通的数组方法在这里似乎不起作用。

如何修复 React 和 Formik？

Answer 1

我认为该FieldArray组件最适合您的用例。
我已经修改了您的codesandbox示例以使用它：

import React from "react";
import { Button } from "@material-ui/core";
import { Formik, Form, Field, FieldArray } from "formik";
import { TextField } from "formik-material-ui";

// Here is an example of a form with an editable list.
// Next to each input are buttons for insert and remove.
// If the list is empty, there is a button to add an item.
export default ComboBox = () => (
  <Formik
    initialValues={{
      items: [
        {
          name: "James",
          name2: "Bond"
        }
      ]
    }}
    onSubmit={(values) =>
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
      }, 500)
    }
    render={({ values }) => (
      <Form>
        <FieldArray
          name="items"
          render={(arrayHelpers) => (
            <div>
              {values.items && values.items.length > 0 ? (
                values.items.map((item, index) => (
                  <div key={index}>
                    <Field
                      component={TextField}
                      variant="outlined"
                      fullWidth
                      label="Name"
                      name={`items.${index}.name`}
                    />
                    <Field
                      component={TextField}
                      variant="outlined"
                      fullWidth
                      label="Name2"
                      name={`items.${index}.name2`}
                    />
                    <Button
                      type="button"
                      onClick={() => arrayHelpers.remove(index)} // remove an item from the list
                    >
                      -
                    </Button>
                    <Button
                      type="button"
                      onClick={() =>
                        arrayHelpers.insert(index, { name: "", name2: "" })
                      } // insert an empty item at a position
                    >
                      +
                    </Button>
                  </div>
                ))
              ) : (
                <Button
                  type="button"
                  onClick={() => arrayHelpers.push({ name: "", name2: "" })}
                >
                  {/* show this when user has removed all items from the list */}
                  Add item
                </Button>
              )}
              <div>
                <Button type="submit">Submit</Button>
              </div>
            </div>
          )}
        />
      </Form>
    )}
  />
);