React-Hook Form：无法读取未定义的属性（读取 'field'）

Question

我的表单是嵌套的，如果我只提交一个产品，没有错误，但是如果我单击 Add More Product 并单击 add more colors 按钮，这就是我遇到的错误：

Cannot read properties of undefined (reading 'field')

这是它指出的地方：

<input
  36 |   name={`test[${nestIndex}].nestedArray[${k}].color`}
  37 |   ref={register({ required: true })}
> 38 |   defaultValue={item.field}
     |                     ^
  39 |   style={{ marginRight: "25px" }}
  40 | />

这里：

return (
  19 |   <div>
> 20 |     {fields.map((item, k) => {
     |            ^
  21 |       return (
  22 |         <div key={item.id} style={{ marginLeft: 20 }}>
  23 |           <label>{k + 1}</label>

添加更多产品，添加更多颜色会出现这些错误

这是表格的样子：

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

错误在fieldArray.js:

我

mport 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}].nestedArray[${index}].product`}
                inputRef={register({ required: true })}
                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 文件中添加 item.product 而不是 item.name

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

in nestedFieldArray.js 在 Size 组件中添加 refer 和 defaultValue 并从名称中删除 field1 并添加 size

<Size
    name={`test[${nestIndex}].nestedArray[${k}].size`}
    menuItems={menuItems}
    refer={register({ required: true })}
    defaultValue={item.size}
    control={control}
/>

先在Size.js文件中import React from 'react';然后在props

defautlValue

const Size = ({ name, menuItems, defaultValue, control }) => (
   <Controller
       as={
           <Select>
               {menuItems.map(({ value, label }, index) => (
                   <MenuItem key={index} value={value}>
                       {label}
                   </MenuItem>
               ))}
           </Select>
       }
       name={name}
       control={control}
       defaultValue={defaultValue}
       rules={{ required: true }}
       fullWidth
   />
);

React-Hook Form：无法读取未定义的属性（读取 'field'）

React-Hook Form: Cannot read properties of undefined (reading 'field')

javascript

reactjs

react-hook-form