试图在 table 分页内切片 javascript 对象但无法访问对象的属性

Question

在这个程序中，我试图在一个对象数组中映射一个函数，以便使用来自这个用户数组的信息来呈现行。这样做时，TypeScript 在尝试访问此信息时给我带来了各种问题。我看不到它是什么我错过了允许我访问属性的内容。

我的对象的接口：

type TableData = Array<Row>;

interface Row {
    id: string,
    twilio_sid: string,
    user_sid: string,
    name: string,
    activity_sid: string,
    activity_name: string,
    activity_last_updated: string,
    role_id?: string,
    queues?: string,
    channels: [],
    role?: string
}

到目前为止尝试的地图：

 {(rowsPerPage > 0
                        ? Object.entries(rows).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                        : rows
                    ).map((user) => (
                        <TableRow key={user.id}>
                            <TableCell component="th" scope="row">
                                {user.name}
                            </TableCell>
                            <TableCell style={{ width: 160 }} align="left">
                                {user.role}
                            </TableCell>
                            <TableCell style={{ width: 160 }} align="left">
                                {user.activity_name}
                            </TableCell>
                            <TableCell style={{ width: 160 }} align="right">
                                Edit
                            </TableCell>
                        </TableRow>
                    ))}

我以前没有使用 Object.entries(obj) 实现，但这仍然引发错误，指出 slice 不是此类型的函数 Row。

是否存在我仍然可以在这方面使用 slice 的实现？

解决方案

将 Object.entries(obj) 替换为 Object.values(obj)

{(rowsPerPage > 0
            ? Object.values(users).slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                : Object.values(users)
            )
            .map((user: User) => (
                    <TableRow key={user.id.toString()}>
                        <TableCell component="th" scope="row">
                            <p>{user.name.toString()}</p>
                        </TableCell>
                        <TableCell style={{ width: 160 }} align="left">
                            <p>{user.role?.toString()}</p>
                        </TableCell>
                        <TableCell style={{ width: 160 }} align="left">
                            <p>{user.activity_name.toString()}</p>
                        </TableCell>
                        <TableCell style={{ width: 160 }} align="right">
                            <p></p>
                        </TableCell>
                    </TableRow>
            ))}

上面 Object.values(obj).slice() 的实现非常适合我的需要。

Answer 1

Object.entries returns key-value 对数组，存储在 [key, value] 这样的数组中。您可能想要的是 Object.values() 函数（returns 仅是您感兴趣的值）。 https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/values

试图在 table 分页内切片 javascript 对象但无法访问对象的属性

Attempting to slice a javascript object inside of table pagination but unable to access properties of the object

javascript

arrays

typescript

slice

解决方案