如何使用 Typescript 以 React Hook 形式一次设置多个值

Question

我有以下界面：

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

用作使用 React 查询获取数据的类型。如果有数据，我正在使用 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"

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

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

如何使用 Typescript 以 React Hook 形式一次设置多个值

How to set multiple values at once in react hook form using Typescript

reactjs

typescript

react-hook-form