从 React.js 中的卡片列表中删除特定元素答案

【问题标题】：Deleting a specific element from a list of cards in React.js从 React.js 中的卡片列表中删除特定元素
【发布时间】：2021-10-17 11:11:09
【问题描述】：

我正在尝试删除我返回的卡片列表中的特定元素。但是当我尝试删除特定卡时，它总是会删除列表中最后添加的卡。例如，我有各种各样的卡片：[特斯拉、Facebook、谷歌、亚马逊]。然后我添加了一张新卡片，它将卡片分类更新为 [Tesla, Facebook, Google, Amazon, Microsoft]。我想从列表中删除“Tesla”，但最终却删除了“Microsoft”。

由于某种原因，当我尝试删除某些内容时，我总是最终引用对象数组中的最后一项。感谢您提供任何反馈。

const displayApplications = (props) => {
  const {applications} = props;

  const deleteApplicationHandler = async (id) => {
    const config = {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${localStorage.getItem('authToken')}`,
      },
    };

    try {
      axios.delete(`api/applications/deleteApplication/${id}`, config);

      window.location.reload();
    } catch (error) {
      setError(error.response.data.error);
    }
  };

  if (applications.length > 0) {
    return applications.map((application, id) => {
      const formattedDate = moment(application.dateApplied).format('MM-DD-YY');

      return (
        <>
          <Card variant="outlined" style={{height: '250px', width: '300px'}} key={application._id}>
            <CardHeader
              action={
                <IconButton color="primary" onClick={handleClick}>
                  <MoreVertIcon fontSize="large" />
                </IconButton>
              }
              avatar={
                <Avatar
                  src={application.companyLogo}
                  aria-label={`company-logo`}
                  style={{width: '55px', height: '55px'}}
                />
              }
              title={application.company}
              subheader={`Applied on: ${formattedDate}`}
              classes={{
                title: classes.headerTitle,
              }}
            />
            <Menu
              elevation={1}
              id="basic-menu"
              anchorEl={anchorEl}
              open={open}
              onClose={handleClose}
              style={{shadows: 'none'}}
              MenuListProps={{
                'aria-labelledby': 'basic-button',
              }}>
              <MenuItem onClick={() => deleteApplicationHandler(application._id)}>
                Delete Application
              </MenuItem>
            </Menu>
            <CardContent style={{paddingTop: 0, paddingLeft: '25px', paddingRight: '25px'}}>
              <Typography variant="h5" component="div" style={{fontColor: ''}}>
                {application.position}
              </Typography>
              <Typography style={{mb: 1.5}} color="text.secondary">
                {application.status}
              </Typography>
              <Typography variant="body2">{application.comments}</Typography>
            </CardContent>
          </Card>
        </>
      );
    });
  } else {
    return (
      <>
        <h3>No applications yet </h3>
      </>
    );
  }
};

deleteApplicationHandler 的控制器代码：

deleteApplication = async (req, res, next) => {
    let token;

    if (req.headers.authorization && req.headers.authorization.startsWith("Bearer")) {
        token = req.headers.authorization.split(" ")[1];
    }

    if (!token) {
        return next(new ErrorResponse("Not authorized to access this route", 401));
    }

    try {
        // getting user's information
        const decoded = jwt.verify(token, process.env.JWT_SECRET)

        const user = await User.findById(decoded.id);

        if (!user) {
            return next(new ErrorResponse("No user found with this id", 404));
        }

        req.user = user;

        const application = await Application.findByIdAndDelete(req.params.id);

        console.log(application);

        res.status(200).json({ message: `Application for ${user.username} at ${application.company} has been deleted`, application });
    } catch (error) {
        next(error);
    }
}

【问题讨论】：

我看不出有什么问题。 api/applications/deleteApplication/${id} 的后端看起来如何？您确定这些 ID 是唯一的吗？
调用delete API会有什么反应？你在网络标签上检查它吗？
看看数据结构是什么样的，以及控制器中的逻辑会非常有帮助。前端传递ID删除就好了。
@Erik 刚刚使用 deleteApplicationHandler 的后端代码更新了问题。任何反馈表示赞赏！
@novonimo 在 Postman 中测试时，调用删除 API 将导致使用其 ID 删除卡片。

标签： javascript node.js reactjs

【解决方案1】：

在applications.map 下为您的渲染函数返回的根元素返回一个片段<> 并且它没有键，因此，React 不知道哪些元素与您的数组元素匹配，它只会注意到您现在正在尝试渲染比以前更少的元素，因此删除最后一个应该就足够了。在你的情况下，它不是。

如果你只是删除 <> 并且它匹配结束标记 </>，React 将能够在 <Card key={application._id}> 中看到 key 属性。

另一种选择是使用<React.Fragment key={application._id}>（它匹配结束标记而不是<>。

【讨论】：