在提交表单之前将 Formik 字段数组重置为空数组

Question

我将 Formik 用作带有 FieldArray 的 React 应用程序的一部分。在 CodeSandbox 中使用以下示例：https://codesandbox.io/s/3yv7135981?file=/form.js 以及以下 values/props 示例：

props = {
  "values": {
    "plantTitle": "Test",
    "streetAddress": "2222",
    "city": {
      "value": "Gainesville",
      "label": "Gainesville"
    },
    "country": {
      "value": "United States of America",
      "label": "United States of America"
    },
    "descr": "rererere",
    "categories": [
      {
        "value": "Skin & Personal Care",
        "label": "Skin & Personal Care",
        "color": "#f47f20"
      }
    ],
    "nodes": [
      {
        "node_label": "municipal",
        "node_categories": [],
        "cost": "11",
        "currencyUnit": "usd",
        "volume": "1",
        "volumeUnit": "gallons",
        "accuracy": "estimated",
        "numFeeds": "",
        "comment": "qaz",
        "fedInto": []
      },
      {
        "node_label": "ground",
        "node_categories": [],
        "cost": "22",
        "currencyUnit": "usd",
        "volume": "33",
        "volumeUnit": "cubic_meters",
        "accuracy": "measured",
        "numFeeds": "",
        "comment": "dsdsds",
        "fedInto": []
      }
    ]
  }

在提交整个表单之前，我将如何单独重置 nodes[] 字段数组，但仍然保持上述 plantTitle, streetAddress 等的所有值？

我已经尝试 setFieldValue(nodes, []) 但无济于事。我基本上只需要将节点重置回空数组并允许用户重新输入。

Answer 1

我已经分叉了您提供的沙箱。你几乎和 setFieldValue 在一起了。你可能只是错过了一些引号 ("nodes").

onClick={() => setFieldValue("nodes", [])}

Fork of the codesandbox with setFieldValue("nodes", [])

在提交表单之前将 Formik 字段数组重置为空数组

Resetting a Formik field array to an empty array prior to form submission

javascript

forms

reactjs

formik