Javascript Reactjs formik从数组中删除项

我的组件中有这些状态

const[initialValues，setInitialValues]=useState({
姓名：“，
姓名2:“，
项目：[]
});

name

和

name2

组合在一起，形成一个数组

{name:'sss'，name2:'sss'}

并推送到

项

数组。推动部分没问题。唯一的问题是由谁删除该数组中的项

这是我的密码

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

---

如何修复React和Formik？

您可以使用Formik函数

setValues

设置表单值

{
values.items.map（（e，i）=>(
{
设定值({
名称：“”，
名称2:“”，
items:values.items.filter（（newE）=>newE！==e），//删除单击的项
})
}}
>
删除{e.name}
))
}

完整的代码片段如下所示：

/*eslint在定义前禁用no use*/
从“React”导入React，{useState}
从“@material ui/core”导入{Button}
从“Formik”导入{Formik，Form，Field}
从“formik材质ui”导入{TextField}
导出默认函数组合框（）{
常量[initialValues，setInitialValues]=useState({
名称：“”，
名称2:“”，
项目：[]，
})
返回(
{}}
启用重新初始化
>
{({
是有效的，
肮脏的
价值观
handleChange，
车把，
setFieldValue，
设置值，
}) => {
返回(
{
console.log（'values'，values）
setFieldValue（`items[${values.items.length}]`{
name:values.name，
name2:values.name2，
})
}}
>
添加项
{values.items.map（（e，i）=>(
{
设定值({
名称：“”，
名称2:“”，
items:values.items.filter（（newE）=>newE！==e），//删除单击的项
})
}}
>
删除{e.name}
))}
)
}}
)
}
//IMDb用户评选的前100部电影。http://www.imdb.com/chart/top
常量代理=[
{name:'Pathum'，id:1}，
{name:'Chamod'，id:2}，
{姓名：'Avishka'，id:3}，
]

您可以使用Formik函数

setValues

设置表单值

{
values.items.map（（e，i）=>(
{
设定值({
名称：“”，
名称2:“”，
items:values.items.filter（（newE）=>newE！==e），//删除单击的项
})
}}
>
删除{e.name}
))
}

完整的代码片段如下所示：

/*eslint在定义前禁用no use*/
从“React”导入React，{useState}
从“@material ui/core”导入{Button}
从“Formik”导入{Formik，Form，Field}
从“formik材质ui”导入{TextField}
导出默认函数组合框（）{
常量[initialValues，setInitialValues]=useState({
名称：“”，
名称2:“”，
项目：[]，
})
返回(
{}}
启用重新初始化
>
{({
是有效的，
肮脏的
价值观
handleChange，
车把，
setFieldValue，
设置值，
}) => {
返回(
{
console.log（'values'，values）
setFieldValue（`items[${values.items.length}]`{
name:values.name，
name2:values.name2，
})
}}
>
添加项
{values.items.map（（e，i）=>(
{
设定值({
名称：“”，
名称2:“”，
items:values.items.filter（（newE）=>newE！==e），//删除单击的项
})
}}
>
删除{e.name}
))}
)
}}
)
}
//IMDb用户评选的前100部电影。http://www.imdb.com/chart/top
常量代理=[
{name:'Pathum'，id:1}，
{name:'Chamod'，id:2}，
{姓名：'Avishka'，id:3}，
]

我认为

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>
    )}
  />
);

从“React”导入React；
从“@material ui/core”导入{Button}”；
从“Formik”导入{Formik，Form，Field，FieldArray}；
从“formik材质ui”导入{TextField}；
//下面是一个具有可编辑列表的表单示例。
//每个输入旁边都有用于插入和删除的按钮。
//如果列表为空，则有一个按钮用于添加项目。
导出默认组合框=（）=>(
设置超时（（）=>{
警报（JSON.stringify（值，null，2））；
}, 500)
}
render={（{values}）=>(
(
{values.items&&values.items.length>0(
values.items.map（（项目，索引）=>(
arrayHelpers.remove（index）}//从列表中删除项
>
-
插入（索引，{name:，name2:}）
}//在某个位置插入一个空项
>
+
))
) : (
arrayHelpers.push（{name:，name2:}）}
>
{/*显示此w