如何在 React 中正确使用 useState hook with typescript？

Question

我正在尝试制作一个登录表单以与打字稿做出反应。但是 setEmail 方法不接受值。它说 'string' 类型的参数不可分配给 'SetStateAction' 类型的参数。我应该怎么做才能解决？

Answer 1

如果没有任何初始参数，email 和 setEmail 的类型将是未定义的。

const [email, setEmail]: [undefined, (value: ((prevState: undefined) => undefined) | undefined) => void] = useState();

所以第一步是通过使用 useState("") 或更好的 useState<string>("").

强制电子邮件成为字符串

Answer 2

用空字符串初始化useState即可解决。

useState 可以根据您的 initialState 推断类型，这就是为什么用空字符串初始化会解决您的问题。

没有 initialState 的 useState 将是未定义的，所以你的类型和状态是未定义的。

如果您希望您的状态具有更复杂的类型，您需要传递一个具有定义类型的 initialState：

const initialState: TYPE = {
  // ...
};
const [state, setState] = useState(initialState);

或

将类型传递给 useState 而不将类型设置为 initialState，例如：useState<TYPE>(initialState);

Answer 3

你可以为它设置一个字符串类型

显式方式:

const [email, setEmail] = useState<string>('')

或 隐式方式:

const [email, setEmail] = useState('')

或如果要设置号码类型

const [inputNumber, setInputNumber] = useState<number>(0);

然后在jsx，这样做

<input
  type="number"
  value={inputNumber}
  onChange={(val) => {
    //Some ways to do this
    setInputNumber(Number(val.target.value));
    setInputNumber(+val.target.value);
    setInputNumber(parseInt(val.target.value,0));
  }}
/>

see more examples

Answer 4

在这种情况下，您只需要使用带有 useState 钩子的泛型

简单案例

const [email, setEmail] = useState<string>("")

复杂情况

声明接口

     interface IUser{
        email:string
        }

使useState通用

     const [email, setEmail] = useState<IUser>({email: ''})

可以看到DefinitelyTyped

如何在 React 中正确使用 useState hook with typescript？

How to use useState hook in React with typescript correctly?

typescript

reactjs

react-hooks

use-state