我正在尝试从一个返回此内容的API中呈现简单的用户列表:
[{"UserID":2,"FirstName":"User2"},{"UserID":1,"FirstName":"User1"}]
我不完全理解如何处理带有类型的 Axios 响应。TypeScript 错误为:
Type '{} | { id: number; firstName: string; }' 不能赋值给类型 'IntrinsicAttributes & UserListProps & { children?: ReactNode; }'。
属性 'items' 在类型 '{}' 中缺失,但在类型 'UserListProps' 中是必需的。
出自下面的 <UserList />
元素,位于 Users.tsx
文件中。我的 User
接口有问题吗?
import React, {useEffect, useState, Fragment } from 'react';
import UserList from './UserList';
import axios, {AxiosResponse} from 'axios';
interface User {
id: number;
firstName: string;
}
const Users: React.FC = (props) => {
const [users, setUserList] = useState<User>();
useEffect(() => {
// Use [] as second argument in useEffect for not rendering each time
axios.get('http://localhost:8080/admin/users')
.then((response: AxiosResponse) => {
console.log(response.data);
setUserList( response.data );
});
}, []);
return (
<Fragment>
<UserList {...users} />
</Fragment>
);
};
export default Users;
以下是我的UserList.tsx
文件。
import React, {Fragment } from 'react';
interface UserListProps {
items: {id: number, firstName: string}[];
};
const UserList: React.FC<UserListProps> = (props) => {
return (
<Fragment>
<ul>
{props.items.map(user => (
<li key={user.id}>
<span>{user.firstName}</span>
{/* not call delete function, just point to it
// set this to null in bind() */}
</li>
))}
</ul>
</Fragment>
);
};
export default UserList;
axios.get<User>
而不是useState<User>()
吗?如果我尝试这样做,TypeScript会抱怨useState()
未定义。 - G. Debailly[]
括号即可。 - Józef PodleckiuseState()
。我得到了这个错误:类型“User[]”的参数不能赋给类型“SetStateAction<undefined>”的参数。 类型“User[]”没有与签名“(prevState: undefined) => undefined”的任何重载匹配。ts(2345)
- G. DebaillyuseState([])
。否则,您必须扩展类型useState<User[] | undefined>()
,在子组件中添加检查变量是否未定义,并对其进行处理。 - Józef Podlecki