带有 useFieldArray 的 React-Hook Form：TextField 值未显示在控制台中。我该如何解决？

Question

我想输入 Product 这个词，但是当我提交它时，它没有显示在控制台中。

控制台中显示的内容：

如您所见，Product 一词未出现在控制台中。知道如何解决这个问题吗？

这是 codesandbox link: https://codesandbox.io/s/react-hook-form-usefieldarray-nested-arrays-forked-vjwbp?file=/src/index.js

这是fieldArray.js产品输入字段

import React from "react";
import { useFieldArray } from "react-hook-form";
import NestedArray from "./nestedFieldArray";
import { TextField } from "@mui/material";

let renderCount = 0;

export default function Fields({ control, register, setValue, getValues }) {
  const { fields, append, remove, prepends } = useFieldArray({
    control,
    name: "test"
  });

  renderCount++;

  return (
    <>
      <ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              {/* <select
                ref={register()}
                name={`test[${index}].name`}
                defaultValue={item.name}
              >
                <option value="">Select</option>
                <option value="10">ItemA</option>
                <option value="20">ItemB</option>
              </select> */}
              {/* {index + 1}  to show the qty */}
              <TextField
                name={`test[${index}].name`}
                refer={register()}
                defaultValue={item.name}
              />

              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
              <NestedArray nestIndex={index} {...{ control, register }} />
            </li>
          );
        })}
      </ul>

      <section>
        <button
          type="button"
          onClick={() => {
            append({ name: "append" });
          }}
        >
          Add product
        </button>
      </section>

      <span className="counter">Render Count: {renderCount}</span>
    </>
  );
}

Answer 1

你可以改变它的尝试方式：

fieldArray.js

<TextField
  name={`test[${index}].nestedArray[${index}].product`}
  inputRef={register({ required: true })}
  defaultValue={item.name}
/>;

带有 useFieldArray 的 React-Hook Form：TextField 值未显示在控制台中。我该如何解决？

React-Hook Form with useFieldArray: TextField value does not show up in the console. How can I fix it?

javascript

reactjs

react-hook-form