useFieldArray 不读取传递给字段的数据答案

【问题标题】：useFieldArray not reading data passed in to fieldsuseFieldArray 不读取传递给字段的数据
【发布时间】：2020-11-04 11:08:13
【问题描述】：

我正在使用 defaultValues 将数据预填充到我的数组中。我正在从减速器中挑选这些数据。但是，它不会填充它。我可以看到 useSelector 选择了有效数据，但 fields.map 中的字段只有一个看起来类似于 uuid (a545sad5d-6576sd5-sdadf) 的 id。下面是一个小sn-p

const losses = useSelector(state => state.losses);
const { handleSubmit, control, register, errors } = useForm({defaultValues: {
    losses: [losses]
  }});
  const { fields, append, remove } = useFieldArray({
    control,
    name: "losses"
  });
{fields.map((item, index) => {
                return (
                  <div className={style.losses} key={item.id}>
                    <InputText  defaultValue={item.type}  register={register} errors={errors} name={`losses[${index}].type`} />
                    <InputText defaultValue={item.amount} register={register} errors={errors}  name={`losses[${index}].amount`} />
                    <InputText  defaultValue={item.date} register={register} errors={errors} name={`losses[${index}].date`} />
                  </div>
    );
}

我的损失有数据[{ id: 45, type: 'accident', amount:'500', date:'2020-05-05'}, { id: 46, type: 'fire', amount:'550', date:'2020-05-04'}]，但在使用 .map 遍历字段时，我只得到一个 id 为：tyu56rt45r-rt5rt-df4567 的项目。我错过了什么吗？

【问题讨论】：

标签： reactjs react-hooks react-hook-form

【解决方案1】：

问题是，在调用 useSelector 损失之前，我正在使用 react-hook-form 的 useEffect() 方法向 fetchLosses 进行调度。发现组件没有更新。使用新的损失值。我需要重新渲染来更新组件

修复：

useEffect(() => {
reset(knownLosses)
}[reset, knownLosses]

我必须调用useForm() 的reset 方法来使用新获取的knownLosses 更新表单

【讨论】：