Is there a way to get past the error "TypeError: headers.map is not a function"?
Is there a way to get past the error "TypeError: headers.map is not a function"?
TypeError: headers.map 不是函数
function TableComponent(headers, values) {
if (!headers || !values) return null;
const optionsPerPage = [2, 3, 4];
const [page, setPage] = useState(0);
const [itemsPerPage, setItemsPerPage] = useState(optionsPerPage[0]);
console.log(headers);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<DataTable>
{headers.map(({ title, numeric }) => <DataTable.Title key={title} numeric={numeric}>{title}</DataTable.Title>)}
{values.map((value, index) => <DataTable.Row key={index}>
{headers.map(({ title }) => <DataTable.Cell key={title}>{value[title]}</DataTable.Cell>)}
</DataTable.Row>)}
<DataTable.Pagination
page={page}
numberOfPages={3}
onPageChange={(page) => setPage(page)}
label="1-2 of 6"
optionsPerPage={optionsPerPage}
itemsPerPage={itemsPerPage}
setItemsPerPage={setItemsPerPage}
showFastPagination
optionsLabel={'Rows per page'}
/>
</DataTable>
</View>
);
}
也许我完全使用了错误的解决方案来解决这个问题。如果这根本行不通,我愿意接受其他选择。
根据评论,headers
是一个对象而不是数组,这解释了“headers.map
不是函数”。相反,使用 headers.headers.map(...)
因为 headers.headers
是一个数组。
TypeError: headers.map 不是函数
function TableComponent(headers, values) {
if (!headers || !values) return null;
const optionsPerPage = [2, 3, 4];
const [page, setPage] = useState(0);
const [itemsPerPage, setItemsPerPage] = useState(optionsPerPage[0]);
console.log(headers);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<DataTable>
{headers.map(({ title, numeric }) => <DataTable.Title key={title} numeric={numeric}>{title}</DataTable.Title>)}
{values.map((value, index) => <DataTable.Row key={index}>
{headers.map(({ title }) => <DataTable.Cell key={title}>{value[title]}</DataTable.Cell>)}
</DataTable.Row>)}
<DataTable.Pagination
page={page}
numberOfPages={3}
onPageChange={(page) => setPage(page)}
label="1-2 of 6"
optionsPerPage={optionsPerPage}
itemsPerPage={itemsPerPage}
setItemsPerPage={setItemsPerPage}
showFastPagination
optionsLabel={'Rows per page'}
/>
</DataTable>
</View>
);
}
也许我完全使用了错误的解决方案来解决这个问题。如果这根本行不通,我愿意接受其他选择。
根据评论,headers
是一个对象而不是数组,这解释了“headers.map
不是函数”。相反,使用 headers.headers.map(...)
因为 headers.headers
是一个数组。