如何输入.map迭代?Typescript显示问题
{userList.items.map(user => (
<tr className='list_row'>
<td className='list_col1'> {user.username}</td>
<td className='list_col2'>{user.email}</td>
<td className='list_col3'>{user.address}</td>
</tr>
))}
const [userList, setUserList] = useState<{
error?: any;
isLoaded: boolean;
items?: Object[];
}>({
error: null,
isLoaded: false,
items: [],
});
我试着创造文字,但不知道如何使用它。
type User = {
username?: string | null;
email?: string | null;
address?: string | null;
};
3条答案
按热度按时间zbwhf8kr1#
如果您已经有了
User
类型,可以像这样使用它:items?: User[]
但是,如果
UserList.items
可以是undefined
或User[]
,则typescript不会让您调用UserList.items.map()
。所以首先你需要检查
UserList.items
不是undefined
,然后才能Map,否则有可能导致运行时错误。例如或者使用可选的链接语法,例如
mwg9r5ms2#
只是不要让
items
成为可选的:14ifxucb3#
由于您将项的类型指定为可选Object,因此Typescript显示此错误。在大多数情况下,数组的值未定义。它可能是空数组([])或项目数组。因此,如果userList不能为数组保存undefined,则可以使用该值而不使用可选操作符。如果确定此状态变量将可选地保存数组值,然后尝试在typescript中使用可选链接。对用户对象也做同样的操作。因为你把用户对象的所有属性都添加为可选的