访问 Formik FieldArray 中的嵌套数组

Question

**编辑：请检查更新的沙箱，它包含了以下答案中建议的一些更改。**

我正在使用 Formik 及其<FieldArray ../>组件来处理一些嵌套数据以呈现输入。我无法弄清楚要传递给 .name 属性的确切字符串<FieldArray name={ // here}。

在我的组件中，我有一个用户选择，它过滤掉一些数据并返回这个数组。

"chosenDevice": [
  {
    "deviceName": "eth0",
    "macAddress": "01:40:27:0F:2E:CB",
    "ipv4DHCP": false,
    "ipv4Addresses": [
      "182.148.1.100/24"
    ],
    "ipv4Gateway": "",
    "ipv6DHCP": false,
    "ipv6Addresses": [
      "232.232.2/100/10"
    ],
    "ipv6Gateway": ""
  }
]

我想访问ipv4Addresses数组。我要么将错误的字符串传递给，name要么没有.map正确使用索引。目前我有以下几点：

    <FieldArray
  name={`chosenDevice.ipv4Addresses[${index}]`}
>
  {({ remove, push }) => (
    <>
      <div>
        {values.chosenDevice.length > 0 &&
          values.chosenDevice.map(
            (ipv4Addresses, index) => (
              <div
                style={{
                  display: "flex"
                }}
                key={index}
              >
                <label
                  htmlFor={`chosenDevice[${index}].ipv4Addresses`}
                  className="custom-label"
                  style={{ flex: 1 }}
                >
                  ipv4Address(es)
                  <Field
                    className="custom-input"
                    name={`chosenDevice[${index}].ipv4Addresses`}
                    placeholder="< ipv4Address >"
                    type="text"
                  />
                </label>
                <ErrorMessage
                  name={`chosenDevice.${index}.ipv4Addresses`}
                  component="div"
                  className="field-error"
                />

我有一个codesanbox 可以提供更多上下文。

在进一步研究之后，基本上我需要提供 的字符串值deviceName[0].ipv4Addresses[0]，所以我可能需要重新考虑 .map 及其实际返回的内容。

Answer 1

对于.mapanother 的内部.map，您可能会index混淆价值观。尝试index为每个名称命名更具体的内容.map（例如deviceIndex和addressIndex）。我addressIndex在下面的答案中使用了内部地图操作。

看来你<FieldArray>在这里应该只关心ipv4Addresses当前chosenDevice对象上的数组。

尝试这个：

<FieldArray
  name="chosenDevice.ipv4Addresses"
>
  {({ remove, push }) => (
    <>
      <div>
        {chosenDevice.ipv4Addresses > 0 &&
          chosenDevice.ipv4Addresses.map(
            (ipv4Address, addressIndex) => (
              <div
                style={{
                  display: "flex"
                }}
                key={addressIndex}
              >
                <label
                  htmlFor={`chosenDevice.ipv4Addresses.${addressIndex}`}
                  className="custom-label"
                  style={{ flex: 1 }}
                >
                  ipv4Address(es)
                  <Field
                    className="custom-input"
                    name={`chosenDevice.ipv4Addresses.${addressIndex}`}
                    placeholder="< ipv4Address >"
                    type="text"
                  />
                </label>
                <ErrorMessage
                  name={`chosenDevice.ipv4Addresses.${addressIndex}`}
                  component="div"
                  className="field-error"
                />

但如果我错了，并且<FieldArray>标签确实需要引用chosenDevice它的子级，那么应该这样做：

<FieldArray
  name={`chosenDevice.${index}.ipv4Addresses`}
>
  {({ remove, push }) => (
    <>
      <div>
        {chosenDevice[index].ipv4Addresses > 0 &&
          chosenDevice[index].ipv4Addresses.map(
            (ipv4Address, addressIndex) => (
              <div
                style={{
                  display: "flex"
                }}
                key={addressIndex}
              >
                <label
                  htmlFor={`chosenDevice.${index}.ipv4Addresses.${addressIndex}`}
                  className="custom-label"
                  style={{ flex: 1 }}
                >
                  ipv4Address(es)
                  <Field
                    className="custom-input"
                    name={`chosenDevice.${index}.ipv4Addresses.${addressIndex}`}
                    placeholder="< ipv4Address >"
                    type="text"
                  />
                </label>
                <ErrorMessage
                  name={`chosenDevice.${index}.ipv4Addresses.${addressIndex}`}
                  component="div"
                  className="field-error"
                />