Блог

Ниже приведен код, связанный с проблемой

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 amp;amp; this.state.filter.title
            ? this.filter.title
            : null,
        subtitle:
          this.state.filter amp;amp; 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>
  );
}
 

Краткое объяснение: Я не хочу, чтобы удаленная запись снова отображалась при попытке удалить заголовок. Если 3 разных названия и удалить одно название, результатом должно быть 2 названия, а не 3, которые складываются и показывают общее количество

Я не знаю, где я ошибаюсь. Действительно нужна помощь, чтобы разобраться в проблеме. Спасибо!!