React Typescript - 无法很好地稳定对象类型

萨尔瓦多·巴奇

我刚开始学习打字稿。我试图从 Javascript 迁移一个项目，但我被一个自定义钩子卡住了。

钩子 useForm 只处理表单中输入的 onChange 事件，然后更新它们的值，以便我可以写入并控制它们的状态。

interface formProps{
  initialValues: {[key: string]: string}
}

export const useForm = ( initialState: formProps['initialValues'] ) => {
  const [values, setValues] = useState(initialState);

  const reset = () => {
    setValues(initialState);
  }

  const handleInputChange = ({ target }: React.ChangeEvent<HTMLInputElement>) =>{
    setValues({
      ...values,
      [target.name]:target.value
    })
  }
  return [values, handleInputChange, reset]
}

useForm 的参数应该是一个具有不同条目的对象，但问题是它可能随时不同，所以我不能指定这个。

例如，当我尝试在组件中使用钩子时，values.userID或者values['password`]出现错误：

类型 '{ [key: string]: string; 上不存在属性 'password' } | (({ target }: ChangeEvent) => void)'

我该如何解决这个问题？提前致谢！

编辑：我从“值”中提取值：

const [values, handleInputChange] = useForm({userID: '', password: ''})

萨尔瓦多·巴奇

我让它工作使用：

import { useState } from "react";

interface InitialStateTypes  {
  [key: string]: string;
}

export const useForm = (initialState: InitialStateTypes): [InitialStateTypes, ({ target }: React.ChangeEvent<HTMLInputElement>) => void, ()=> void]  => {
  const [values, setValues] = useState(initialState);

  const reset = () => {
    setValues(initialState);
  }

  const handleInputChange = ({ target }: React.ChangeEvent<HTMLInputElement>) =>{
    setValues({
      ...values,
      [target.name]:target.value
    })
  }
  return [values, handleInputChange, reset]
}