reactjs 如何键入Array.map迭代?

zysjyyx4  于 2022-12-26  发布在  React
关注(0)|答案(3)|浏览(162)

如何输入.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;
};
zbwhf8kr

zbwhf8kr1#

如果您已经有了User类型,可以像这样使用它:
items?: User[]

type User = {
  username?: string | null;
  email?: string | null;
  address?: string | null;
};

const [userList, setUserList] = useState<{
    error?: any;
    isLoaded: boolean;
    items?: User[]; // could be undefined -- User[] | undefined
  }>({
    error: null,
    isLoaded: false,
    items: [],
  });

但是,如果UserList.items可以是undefinedUser[],则typescript不会让您调用UserList.items.map()
所以首先你需要检查UserList.items不是undefined,然后才能Map,否则有可能导致运行时错误。例如

userList.items && userList.items.map()

或者使用可选的链接语法,例如

userList.items?.map()
mwg9r5ms

mwg9r5ms2#

只是不要让items成为可选的:

const [userList, setUserList] = useState<{
    error?: any;
    isLoaded: boolean;
    items: Object[];
  }>({ //...
14ifxucb

14ifxucb3#

由于您将项的类型指定为可选Object,因此Typescript显示此错误。在大多数情况下,数组的值未定义。它可能是空数组([])或项目数组。因此,如果userList不能为数组保存undefined,则可以使用该值而不使用可选操作符。如果确定此状态变量将可选地保存数组值,然后尝试在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>
))}

相关问题