React js不会从列表中删除组件

Question

我有包含其组件的项目列表，当我从列表中删除项目时，它将删除列表项目，但不会删除该项目的组件。因此，如何删除该项目的组件。在该项目列表中循环显示，我也必须删除带有组件的项目。

<div className={classes.tasklist}>
  <Paper className={classes.listroot}>
    <List className={classes.listroot}>
      {norecordfound}
      {Developertasklist.map((task, index) => {
        let task_icon =
          task.is_bug === "yes" ? (
            <BugIcon className={classes.bugiconcolor} />
          ) : (
            <AssignmentIcon />
          );

        return (
          <ListItem key={index} divider="true">
            <div className={classes.taskwidth}>
              <Avatar>{task_icon}</Avatar>
              <ListItemText
                primary={
                  <React.Fragment>
                    <Typography
                      variant="caption"
                      gutterBottom
                      className={[classes.tasktitle]}
                    >
                      {task.name}
                    </Typography>
                  </React.Fragment>
                }
              />
            </div>
            <div className={classes.timerwidth}>
              <div>
                <TaskTimer
                  developerlist={task}
                  alltasklist={Developertasklist}
                  taskstatus={task.status}
                  totstarttask={totstarttask}
                  onTimerStartEvent={this.onTimerStart}
                  onTimerStopEvent={this.onTimerStop}
                />
              </div>
            </div>

            <div className={classes.width5}>
              <Mutation mutation={DELETE_TODO}>
                {(todo_operations, { loading, error }) => (
                  <DeleteIcon
                    className={classes.icon}
                    aria-label="Delete"
                    onClick={event => {
                      swal({
                        title: "Delete",
                        text: "Are you sure you want to delete this record!",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true
                      }).then(willDelete => {
                        if (willDelete) {
                          todo_operations({
                            variables: {
                              id: task.id,
                              deleted: "1"
                            },
                            update: (cache, { data: { todo_operations } }) => {
                              const { Developertasklist } = cache.readQuery({
                                query: tasksQuery,
                                variables: {
                                  contact_id_c: contact_id,
                                  start_due_date: this.state.startdate,
                                  end_date: this.state.enddate
                                }
                              });
                              cache.writeQuery({
                                query: tasksQuery,
                                variables: {
                                  contact_id_c: contact_id,
                                  start_due_date: this.state.startdate,
                                  end_date: this.state.enddate
                                },
                                data: {
                                  Developertasklist: Developertasklist.filter(
                                    e => e.id !== task.id
                                  )
                                }
                              });
                            }
                            //refetchQueries: [`Developertasklist`]
                          }) &&
                            notify("success", "Record deleted successfully!");
                        }
                      });
                    }}
                  />
                )}
              </Mutation>
            </div>
          </ListItem>
        );
      })}
    </List>
  </Paper>
</div>

有人建议我解决这个问题。

谢谢