如何使用 Typescript 以反应钩子形式一次设置多个值答案

【问题标题】：How to set multiple values at once in react hook form using Typescript如何使用 Typescript 以反应钩子形式一次设置多个值
【发布时间】：2022-01-12 23:40:20
【问题描述】：

我有以下界面：

export interface DataResponse {
  user_id: string;
  name: string;
  phone_number: string;
  country: string;
}

用作通过反应查询获取数据的类型。如果有数据，我正在使用 useEffect 填充字段：

useEffect(() => {
    if (userData) {
      Object.entries(userData).forEach(
        ([name, value]) => setValue(name, value));
    }
}, [setValue, userData]);

userData 的类型是 DataResponse... 当我使用 setState(name, value) 设置值时，它会在名称下划线并引发以下错误：

Argument of type 'string' is not assignable to parameter of type | "name" | "phone_number" | "country"

【问题讨论】：

为什么要在迭代对象时更新状态？是用于更新本地状态的 setValue 吗？如果是这样，只需执行 setValue(userData) 并将您的状态视为对象。
它的react hook表单函数

标签： reactjs typescript react-hook-form

【解决方案1】：

我认为你可以在这里使用 RHF 的reset 方法。

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

【讨论】：

【解决方案2】：

在这种情况下你可以使用 keyof：

useEffect(() => {
    if (userData) {
      Object.entries(userBillingData).forEach(
        ([name, value]) => setValue(name as keyof DataResponse, value));
    }
}, [setValue, userData]);

【讨论】：

还是报错

【解决方案3】：

首先：为什么要检查userData，而不是使用userBillingData？

第二个：因为我不知道userBillingData 是什么，你可以使用：

useEffect(() => {
    if (userData) {
      Object.entries(userBillingData).forEach(
        ([name, value]: any) => setValue(name, value));
    }
}, [setValue, userData]);

否则你将不得不转换正确的类型。

ES7 Object.entries() in TypeScript not working

【讨论】：

是的，抱歉 userBillingData 应该是 userData。