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>
    ) : (

Answer 2

您不会在这里将id传递给handleDeleteFunction()：

<button onClick={this.handleDelete}>Delete</button>

这就是为什么id在undefined中登录时总是handleDeleteFunction()的原因。

您有两种选择来正确传递id。

选项1：使用箭头功能

<button onClick={() => this.handleDelete(oneSavedArticle.id)}>Delete</button>

选项2：使用bind（）

<button onClick={this.handleDelete.bind(this, oneSavedArticle.id)}>Delete</button>

如何获得列表中卡的ID或索引？

2 个答案: