Блог

Я врезался в стену. Проблема в том, что handleDeleteItem() всегда получает последний элемент._id вместо заданного. С другой стороны, goToEdit() работает правильно. До сих пор я пытался разместить ключевое свойство в разных компонентах, удалить node_modules и перестроить приложение. Я понятия не имею, что вызывает эту ситуацию. У меня есть такой компонент, как этот:

 export class List extends Component {
  render() {
    const {
      classes,
      items,
      anchorEl,
      handleDeleteItem,
      openItemMenu,
      closeItemMenu,
      goToEdit,
    } = this.props;
    return (
      <main className={classes.content}>
        <div className={classes.toolbar} />
        <Typography
          variant="h3"
          color="textSecondary"
          gutterBottom
          align="center"
        >
          Items
        </Typography>

        <Grid container spacing={3}>
          <Grid item xs={12} align="right">
            <Button
              variant="outlined"
              color="primary"
              startIcon={<AddIcon />}
              onClick={(e) => goToEdit(e, 0)}
            >
              Add new
            </Button>
          </Grid>
          {!items.length amp;amp; (
            <Grid item xs={12} align="center">
              <Typography variant="overline">
                List empty!
              </Typography>
            </Grid>
          )}
          {items.map((item) => (
            <Grid item key={item._id} xs={12}>
              <Paper
                elevation={3}
                style={{
                  borderLeft: `5px solid ${item.color}`,
                }}
                onClick={(e) => goToEdit(e, item._id)}
                className={classes.paper}
              >
                <Grid container>
                  <Grid item xs={11}>
                    <Typography variant="subtitle1" color="textSecondary">
                      {item.name}
                    </Typography>
                  </Grid>

                  <Grid item xs={1} align="right">
                    <IconButton
                      className={classes.showOnHover}
                      size="small"
                      edge="end"
                      aria-label="delete"
                      onClick={(e) => openItemMenu(e)}
                    >
                      <MoreVertIcon />
                    </IconButton>
                    <Menu
                      id="item-menu"
                      anchorEl={anchorEl}
                      keepMounted
                      open={Boolean(anchorEl)}
                      onClose={(e) => closeItemMenu(e)}
                      TransitionComponent={Fade}
                    >
                      <MenuItem
                        onClick={(e) => handleDeleteItem(e, item._id)}
                      >
                        Usuń bajkę
                      </MenuItem>
                    </Menu>
                  </Grid>

                  <Grid item xs={12}>
                    <Box
                      component="div"
                      my={2}
                      textOverflow="ellipsis"
                      overflow="hidden"
                    >
                      <Typography noWrap variant="body2">
                        {item.description}
                      </Typography>
                    </Box>
                  </Grid>
                </Grid>
              </Paper>
            </Grid>
          ))}
        </Grid>
      </main>
    );
  }
}