React Typescript - 类型参数不可分配给类型参数

IT技术 reactjs typescript
2021-04-28 13:16:25

这里有一个演示

这是一个 React 应用程序,使用 Typescript 和钩子将条目捕获到下面简单显示的表单中。

在 Stackblitz 中它可以工作,但在本地我使用的是 VS 代码,我收到一个错误,setUser(userData);因为错误是

const userData: {
    username: string;
    password: string;
    prevState: null;
}
Argument of type '{ username: string; password: string; prevState: null; }' is not assignable to parameter of type '(prevState: null) => null'.
  Type '{ username: string; password: string; prevState: null; }' provides no match for the signature '(prevState: null): null'.ts(2345)

我怎么能解决这个typescript错误

2个回答
const [user, setUser] = useState(null);

由于你没有给它一个类型,typescript必须尝试推断它。它看到你传入了一个空值,所以它假设这个状态是(并且永远是)空值。相反,您需要指定类型,如下所示:

interface UserData {
  username: string;
  password: string;
  prevState: null
}

//...
const [user, setUser] = useState<UserData | null>(null);

如果您从 API 获取数据,则需要:

import React, { useState, useEffect } from 'react'
import axios from 'axios';

const MyComponent = () => {
const [data, setData] = useState<any | null>(null);
const fetchData = () => {
(...) //Axios.get() or async if u await data.
setData(fetchData)
}
}
useEffect(() =>{
    fetchData()
}, [])