如何解决我试图在react js中将一个表与四个api集成在一起我已经使用了一个材料ui表我无法在表格中显示数据
您好，我们正在尝试使用react js作为前端，nodejs作为后端以及postgress作为数据库来构建应用程序。该应用程序有一个表格，表格还具有可折叠表格功能。在表格中，我们有一个指向项目名称的链接，当我单击项目链接时，应打开折叠表，其中显示了有关类别的所有信息。 我在使用此代码时提到了以下代码，但无法显示表格数据
const actionsStyles = (theme) => ({
root: {
flexShrink: 0,color: theme.palette.text.secondary,marginLeft: theme.spacing.unit * 2.5,},});
class TablePaginationActions extends React.Component {
handleFirstPageButtonClick = (event) => {
this.props.onChangePage(event,0);
};
handleBackButtonClick = (event) => {
this.props.onChangePage(event,this.props.page - 1);
};
handleNextButtonClick = (event) => {
this.props.onChangePage(event,this.props.page + 1);
};
handleLastPageButtonClick = (event) => {
this.props.onChangePage(
event,Math.max(0,Math.ceil(this.props.count / this.props.rowsPerPage) - 1)
);
};
render() {
const { classes,count,page,rowsPerPage,theme } = this.props;
return (
<div className={classes.root}>
<IconButton
onClick={this.handleFirstPageButtonClick}
disabled={page === 0}
aria-label="First Page"
>
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton
onClick={this.handleBackButtonClick}
disabled={page === 0}
aria-label="Previous Page"
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
</IconButton>
<IconButton
onClick={this.handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="Next Page"
>
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</IconButton>
<IconButton
onClick={this.handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="Last Page"
>
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</div>
);
}
}
TablePaginationActions.propTypes = {
classes: PropTypes.object.isRequired,count: PropTypes.number.isRequired,onChangePage: PropTypes.func.isRequired,page: PropTypes.number.isRequired,rowsPerPage: PropTypes.number.isRequired,theme: PropTypes.object.isRequired,};
const TablePaginationActionsWrapped = withStyles(actionsStyles,{
withTheme: true,})(TablePaginationActions);
let counter = 0;
function createData(
project,Assessment_Completion,Achieved_Percentage,Level
) {
counter += 1;
return {
id: counter,project,Level,};
}
const styles = (theme) => ({
root: {
width: "100%",marginTop: theme.spacing.unit * 3,table: {
minWidth: 500,tableWrapper: {
overflowX: "auto",searchField: {
margin: "10px",borderRadius: "3px",outline: "none",border: "1px solid gray",padding: "5px",display: "flex",justifyContent: "flex-end",alignItems: "flex-end",});
class ViewProject extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: [].sort((a,b) => (a.calories < b.calories ? -1 : 1)),page: 0,rowsPerPage: 5,filter: "",open: false,expanded: false,rowIndex: null,isEdit: false,};
}
async componentDidMount() {
await this.props.getallprojects();
console.log();
await this.props.getparticular_project_details();
await this.props.getall_active_project_details();
await this.props.get_all_categories_regarding_project();
}
handleOnChangeSelectValue = (e) => {
this.setState({
projectname: e.target.value,});
};
handleClick = (index) => {
this.setState((state) => ({
open: !state.open,expanded: !state.expanded,rowIndex: index,}));
};
handleChange = (event) => {
this.setState({ filter: event.target.value });
};
handleChangePage = (event,page) => {
this.setState({ page });
};
handleChangeRowsPerPage = (event) => {
this.setState({ page: 0,rowsPerPage: event.target.value });
};
render() {
const {
getallprojectsRes,getparticular_project_detailsRes,getall_active_project_detailsRes,get_all_categories_regarding_projectRes,} = this.props;
const { classes } = this.props;
const { rowIndex,open,expanded } = this.state;
const { rows,page } = this.state;
const emptyRows =
rowsPerPage - Math.min(rowsPerPage,rows.length - page * rowsPerPage);
const { filter } = this.state;
//I have defined variables to call api inside render
const gaplowercasedFilter = filter.toLowerCase();
const gapFilteredData =
getallprojectsRes &&
getallprojectsRes.data &&
getallprojectsRes.data.filter((item) => {
return Object.keys(item).some((key) =>
item[key].toString().toLowerCase().includes(gaplowercasedFilter)
);
});
const gaapdlowercasedFilter = filter.toLowerCase();
const gaapdFilteredData =
getall_active_project_detailsRes &&
getall_active_project_detailsRes.data &&
getall_active_project_detailsRes.data.filter((item) => {
return Object.keys(item).some((key) =>
item[key].toString().toLowerCase().includes(gaapdlowercasedFilter)
);
});
const gacrlowercasedFilter = filter.toLowerCase();
const gacrFilteredData =
get_all_categories_regarding_projectRes &&
get_all_categories_regarding_projectRes.data &&
get_all_categories_regarding_projectRes.data.filter((item) => {
return Object.keys(item).some((key) =>
item[key].toString().toLowerCase().includes(gacrlowercasedFilter)
);
});
const gppdlowercasedFilter = filter.toLowerCase();
const gppdFilteredData =
getparticular_project_detailsRes &&
getparticular_project_detailsRes.data &&
getparticular_project_detailsRes.data.filter((item) => {
return Object.keys(item).some((key) =>
item[key].toString().toLowerCase().includes(gppdlowercasedFilter)
);
});
return (
<div>
<div>
<h3>View Projects</h3>
</div>
<Paper className={classes.root}>
<div className={classes.tableWrapper}>
<input
value={filter}
onChange={this.handleChange}
placeholder="Search here..."
className={classes.searchField}
/>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Project </TableCell>
<TableCell align="right">Category</TableCell>
<TableCell align="right">Assessment Completion %</TableCell>
<TableCell align="right">Achieved Percentage</TableCell>
<TableCell align="right">Level</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell
component="th"
scope="row"
button
onClick={() => this.handleClick(index)}
>
{gapFilteredData &&
gapFilteredData
.slice(
page * rowsPerPage,page * rowsPerPage + rowsPerPage
)
.map(
(row,index) => (
row.name,index === rowIndex && open ? (
<ExpandLess />
) : (
<ExpandMore />
)
)
)}
{gacrFilteredData &&
gacrFilteredData
.slice(
page * rowsPerPage,page * rowsPerPage + rowsPerPage
)
.map((row,index) => (
<Collapse
in={index === rowIndex && expanded}
timeout="auto"
unmountOnExit
>
<Typography
variant="h6"
gutterBottom
component="div"
></Typography>
<Table>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell align="right">
Category
</TableCell>
<TableCell align="right">
Assessment Completion %
</TableCell>
<TableCell align="right">
Achieved Percentage
</TableCell>
<TableCell align="right">Level</TableCell>
</TableRow>
<TableBody>
<TableRow>
<TableCell component="th" scope="row">
{row.category}
</TableCell>
<TableCell align="right">
{row.Assessment_Completion}
</TableCell>
<TableCell align="right">
{row.Achieved_Percentage}
</TableCell>
<TableCell align="right">
{row.Level}
</TableCell>
</TableRow>
</TableBody>
</TableHead>
</Table>
</Table>
</Collapse>
))}
</TableCell>
{gppdFilteredData &&
gppdFilteredData
.slice(
page * rowsPerPage,page * rowsPerPage + rowsPerPage
)
.map((row,index) => (
<>
<TableCell align="right">
{row.Assessment_Completion}
</TableCell>
<TableCell align="right">
{row.Achieved_Percentage}
</TableCell>
<TableCell align="right">{row.Level}</TableCell>
</>
))}
</TableRow>
{emptyRows > 0 && (
<TableRow style={{ height: 48 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5,10,25]}
colSpan={9}
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
native: true,}}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
ActionsComponent={TablePaginationActionsWrapped}
/>
</TableRow>
</TableFooter>
</Table>
</div>
</Paper>
</div>
);
}
}
enter code here
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。