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

Question

我有以下界面：

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"

Answer 1

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

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