javascript - 如何获取列表中卡片的 ID 或索引？

Question

我无法获取从 MongoDB 数据库中提取的文档的 ID，然后将其显示在我使用 React 和 Material-Ui 渲染的一系列卡片上。

我已经在我的函数和我设置的 API 中尝试过控制台日志记录 id，但我要么得到“未定义”(这是 API 返回的内容)，要么得到一堆元数据(这是删除函数返回什么。

这是我的删除功能:

  handleDelete = id => {
    console.log(id);
    console.log(this.props.match.params);

    // API.deleteArticle(this.props.match.params.id)
    //   .then(res => console.log(res.data))
    //   .catch(err => console.log(err));

    // this.props.history.push("/saved");
  };

这是我的 API:

  deleteArticle: function(id) {
    console.log(id);
    return axios.delete("/api/articles/" + id);
  }

这是我的卡片的渲染方式:

        {this.state.savedArticles.length ? (
          <Grid>
            {this.state.savedArticles.map((oneSavedArticle, i) => (
              <Card
                style={savedArticleCard}
                key={oneSavedArticle.id}
              >
                <Typography variant="h5">{oneSavedArticle.headline}</Typography>
                <Divider variant="middle" />
                <Typography>{oneSavedArticle.snippet}</Typography>
                <a href={oneSavedArticle.web_url} style={linkStyles}>
                  <Button style={buttonStyles}>READ IT</Button>
                </a>

                <button onClick={this.handleDelete}>Delete</button>
                {/* <DeleteDialogue id={props.articleFromDatabase.id} {...this.props} /> */}
              </Card>
            ))}
          </Grid>
) : (

该三元的另一部分只是一个默认卡，如果数据库为空，则显示该卡。

我希望能够获取 ID，以便可以从数据库中删除文档(以及从 DOM 中删除卡片)。

任何帮助将不胜感激。非常感谢!

Answer 1

问题是您没有将 ID 传递给 handelDelete 函数，您需要按如下方式更新代码:

{this.state.savedArticles.length ? (
              <Grid>
                {this.state.savedArticles.map((oneSavedArticle, i) => (
                  <Card
                    style={savedArticleCard}
                    key={oneSavedArticle.id}
                  >
                    <Typography variant="h5">{oneSavedArticle.headline}</Typography>
                    <Divider variant="middle" />
                    <Typography>{oneSavedArticle.snippet}</Typography>
                    <a href={oneSavedArticle.web_url} style={linkStyles}>
                      <Button style={buttonStyles}>READ IT</Button>
                    </a>

                    <button onClick={() => this.handleDelete(oneSavedArticle.id)}>Delete</button>
                    {/* <DeleteDialogue id={props.articleFromDatabase.id} {...this.props} /> */}
                  </Card>
                ))}
              </Grid>
    ) : (