DefaultValue对映射对象的使用形式作出反应

Question

如何获取映射对象的值并分配给useform。

     const def = jobdetail.defect_details;
     const sample = def?.map((item) => {
     return {
              defects: item.defects,
              recommendation: item.recommendation,
              photo: []
          };
      });

    const defects_json = JSON.stringify(sample);
    const output = defects_json?.replace(/"(\w+)":/g, '$1:');

    // result of const output when console.log(output) 
    [{defects:"defect 2",recommendation:"recomendatin 2",photo:[]},{defects:"defect1 ",recommendation:"recommendation 1",photo:[]}]

这是我的使用表

      const {
             register,
             formState: { errors },
             handleSubmit,
             reset,
             control,
             getValues,
             setValue,
     } = useForm({
        shouldFocusError: false,
         defaultValues: {
         defectslist: output, // its empty
         partslist: [
           { sorCode: "", item: "", quantity: "", rates: "", subtotal: "" },
         ],
      },
  });

希望有人能帮我解释为什么const输出在useform中是空的

Answer 1

我已经解决了这个问题。我需要传递object以便从useEffect中重置()来重新呈现值：

 const {
   register,
   formState: { errors },
   handleSubmit,
   control,
   getValues,
   setValue,
   reset,
   initialState
 } = useForm();


useEffect(() => {
    reset(jobdetail);
}, [jobdetail])

Answer 2

defaultValues的键需要对应于输入组件的name支柱。因此，您的defaultValues对象本质上需要如下所示：

{
  defects0: "defect 2",
  recommendation0: "recomendatin 2",
  photo0: []
  defects1: "defect 2",
  recommendation1: "recomendatin 2",
  photo1:[],
  sorCode: "",
  item: "",
  quantity: "",
  rates: "",
  subtotal: ""
}

你的html必须看起来像：

<input name="defects0" ref={register}>
<input name="recommendation0" ref={register}>

要实现第一个目标，您可以这样做：

const defaultValuesObj = { sorCode: "", item: "", quantity: "", rates: "", subtotal: "" }
def?.forEach((item, i) => {
 defaultValuesObj[`defects${i}`] = item.defects
 defaultValuesObj[`recommendation${i}`] = item.recommendation
 defaultValuesObj[`photo${i}`] = item.photo
});

你可以做defaultValues: defaultValuesObj