访问 Formik FieldArray 中的嵌套数组

Question

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

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

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

"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]的字符串值，因此我可能需要重新考虑 the.map 及其实际返回的内容。

Answer 1

在另一个.map中使用.map ，您可能会混淆index值。 尝试为每个.map命名更具体的index （例如deviceIndex和addressIndex ）。 我在下面的回答中使用了addressIndex进行内部 map 操作。

---

看起来你的<FieldArray>应该只关心当前chosenDevice object 上的ipv4Addresses数组。

试试这个：

<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"
                />

Answer 2

<FieldArray name={`chosenDevice.ipv4Addresses[${index}]`}>

这里的index如果你试图从下面的 map 使用，那么这是错误的，你不会得到 map 以外的索引。

在 FieldArray 上方使用FieldArray ，如下所示：

values.chosenDevice.map((ipv4Addresses, index) => (
 <FieldArray
  name={`ipv4Addresses[${index}]`}
>
  {({ remove, push }) => (
    <>
      <div>
              <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"
                />)

Answer 3

  const [configIdx, setConfigIdx] = useState(0);

 <FieldArray
           name={`chosenDevice.ipv4Addresses[${configIdx}]`}
                                    >
                                      {({ remove, push }) => (
                                        <>
                                          <div>
                                            {values.chosenDevice.length > 0 &&
                                              values.chosenDevice.map(
                                                (ipv4Addresses, index) => {
                                                  setConfigIdx(index);
                                                  return (
                                                    <div
                                                      style={{
                                                        display: "flex"
                                                      }}
                                                      key={index}
                                                    >
                                                      <label

查看我如何更新 state，这可能有助于实现您的结果。