React js 中的类型 'Record<"id", string>' 上不存在属性 'number'

Question

我正在使用反应钩子形式来构建演示应用程序。我正在使用usefieldarray到 append 行。

https://react-hook-form.com/api/usefieldarray/

但我收到 typescript 错误

我已经定义了接口

export interface InitiateHoldModel {
  checked: boolean | null;
  containers: Array<ContainerOnHold> | null;
}
export interface ContainerOnHold {
  checked: boolean;
  number: string;
  size: string;
}

这是我的代码https://codesandbox.io/s/priceless-kowalevski-c0qjmh?file=/src/ReleaseFields.tsx:0-805

import { HookCheckBox, useHookFormContext } from "mui-react-hook-form-plus";
import { useFieldArray } from "react-hook-form";

export default function ReleaseFields(): JSX.Element {
  const { registerState, control } = useHookFormContext();
  const prependKey = "containers";
  const { fields } = useFieldArray({
    control,
    name: prependKey
  });
  return (
    <>
      <HookCheckBox {...registerState("checked")} />
      <label>B344332</label>
      {fields.length > 0 && (
        <ul>
          {fields.map((item, index) => (
            <li key={index}>
              <HookCheckBox
                {...registerState(`${prependKey}[${index}].checked`)}
              />
              {item.number}
              {item.size}
            </li>
          ))}
        </ul>
      )}
    </>
  );
}

Answer 1

使用getValues显示

export default function ReleaseFields(): JSX.Element {
  const { registerState, control, getValues } = useHookFormContext();
  const prependKey = "containers";
  const { fields } = useFieldArray({
    control,
    name: prependKey
  });
  return (
    <>
      {fields.length > 0 && (
        <ul>
          {fields.map((item, index) => (
            <li key={item.id}> // use item.id as key - it's important
              <HookCheckBox
                control={control}
                {...registerState(`${prependKey}[${index}].checked`)}
              />
              <span>{getValues(`${prependKey}[${index}].number`)}</span>
              <span>{getValues(`${prependKey}[${index}].size`)}</span>
            </li>
          ))}
        </ul>
      )}
    </>
  );
}

还清理了你的App.tsx