node.js - 'DELETE' 'Title' 不删除 'title' 行 'sub-title, count'; 但用“总数”再次显示“标题”行 - ReactJS

Question

我有一个包含Title,Sub-Title和的表TotalCount。subtitle 是 title的孩子。因此，在 title 集合中，子标题的objectId保存在数据库中。下面是表格的截图。

Title包含Kilo、Test和Grams及其各自的子标题和总数

会发生什么，假设我用Test删除行Title。一旦点击删除，我应该得到Kilo和Grams的记录。但我不明白。事实上，我得到的行与Test with deleted subtitle为空白，而totalcount将所有先前的计数相加并显示4。

当我删除Title Grams时，也会出现同样的问题。

---

以下是与问题相关的代码

mainPage.js

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import Grid from '@material-ui/core/Grid';
import TabPanel from '../../utils/TabPanel';
import { mainStructure, deleteDbData } from './actions';
import TitleSubtitleTable from './titlesubtitletable';

class MainPage extends Component {
  constructor() {
    super();
    this.state = { filter: {} };
  }

  componentDidMount() {
    this.getData();
  }
  getData = async () => {
    let data = {
      data: {
        title:
          this.state.filter && this.state.filter.title
            ? this.filter.title
            : null,
        subtitle:
          this.state.filter && this.state.filter.subtitle
            ? this.state.filter.subtitle
            : null,
      },
    };
    await this.props.mainStructure(data);
  };
  deleteData = async (title) => {
    let payload = {
      type: title.type,
      id: title._id,
    };
    await this.props.deleteDbData(payload);
    await this.getData();
  };
  render() {
    return (
      <div>
        <Grid>
          <TabPanel>
            {this.props.structure.tablestructure.data ? (
              <TitleSubtitleTable
                records={this.props.structure.tablestructure.data}
                totalCount={this.props.structure.tablestructure.totalCount}
                handleDelete={this.deleteData}
              />
            ) : null}
          </TabPanel>
        </Grid>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    structure: state.structure,
  };
};
export default connect(mapStateToProps, { mainStructure, deleteDbData })(
  MainPage
);

下面是代码titlesubtitletable.js

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import DeleteIcon from '@material-ui/icons/Delete';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
const columns = [
  { id: 'title', label: 'Title' },
  { id: 'delete', label: '' },
  { id: 'subtitle', label: 'Sub-Title' },
  { id: 'count', label: 'Total Count' },
];

function EnhancedTableTitle() {
  return (
    <TableHead>
      <TableRow>
        {columns.map((titleCell) => (
          <TableCell key={titleCell.id}> {titleCell.label} </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}
export default function EnhancedTable(props) {
  return (
    <div>
      <TableContainer>
        <Table>
          <EnhancedTableTitle />
          <TableBody>
            {props.records.map((row, index) => {
              return row.children.length > 0 ? (
                row.children.map((title) => (
                  <TableRow key={index}>
                    <TableCell> {row.name} </TableCell>
                    <TableCell>
                      <IconButton onClick={() => props.handleDelete(row)}>
                        <Avatar>
                          <DeleteIcon color='action' />
                        </Avatar>
                      </IconButton>
                    </TableCell>
                    <TableCell align='left' className={classes.tableCellSmall}>
                      {title.name}
                    </TableCell>
                    <TableCell align='left' className={classes.tableCellSmall}>
                      <IconButton onClick={() => props.handleDelete(title)}>
                        <Avatar>
                          <DeleteIcon color='action' />
                        </Avatar>
                      </IconButton>
                    </TableCell>
                    <TableCell>{title.count}</TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow key={index}>
                  <TableCell>{row.name} </TableCell>
                  <TableCell>
                    <IconButton onClick={() => props.handleDelete(row)}>
                      <Avatar>
                        <DeleteIcon color='action' />
                      </Avatar>
                    </IconButton>
                  </TableCell>
                  <TableCell></TableCell>
                  <TableCell></TableCell>
                  <TableCell>{row.count}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

简要说明：我不希望在尝试删除 Title 时再次看到已删除的记录。如果 3 个不同的标题，并删除一个标题，结果应该是 2 个标题，而不是 3 个相加并显示 totalcount

我不知道我哪里错了。确实需要帮助来解决问题。谢谢！！

标签： node.jsreactjsmongodbexpressreact-redux