Question

我有一个钩子useForm，想在所有形式中使用它下面是我要传递初始值的步骤，但是它不起作用我是打字稿新手

interface IForm1 {
  name?: string;
  description?: string;
}
interface IForm2 {
  word?: string;
}

type FormTypes = IForm1 | IForm2;

const useForm = (initialState: FormTypes) => {
  const [values, setValues] = useState(initialState);
  return { values };
};

const work = () => {
  const [values] = useForm({
    word: '',
  });

  console.log(values.word);
};

Answer 1

您需要使钩子成为通用函数，以获得所需的行为。

interface IForm1 {
  name?: string;
  description?: string;
}
interface IForm2 {
  word?: string;
}

type FormTypes = IForm1 | IForm2;

const useForm = <T extends FormTypes>(initialState: T) => {
  const [values, setValues] = useState(initialState);
  return { values };
};

此外，您需要更改返回值以匹配您的解构。如果您打算将结果分解为数组const [values] = useForm(...)，那么您需要返回一个数组。

const useForm = <T extends FormTypes>(initialState: T) => {
  const [values, setValues] = useState(initialState);
  return [values];
};

或更简而言之，如果您不介意将setValues功能返回给呼叫者

const useForm = <T extends FormTypes>(initialState: T) => useState(initialState);

将initialValues传递给自定义钩子打字稿

1 个答案: