Как я могу получить идентификатор или индекс карты в списке? - PullRequest
Новая
       16

Как я могу получить идентификатор или индекс карты в списке?

0 голосов
/ 01 мая 2019

У меня проблемы с получением идентификаторов для документов, которые я извлек из базы данных MongoDB и затем отобразил на серии карт, которые я рендерил с использованием React и Material-Ui.

Я пробовал вводить идентификатор консоли в своих функциях и в API, которые я настроил, но я получаю либо undefined, то есть то, что возвращает 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>
) : (

Другая часть этой троицы - просто карта по умолчанию, которая отображается, если БД пуста.

Я бы хотел получить идентификатор, чтобы затем удалить документ из базы данных (и карточку из DOM).

Любая помощь будет принята с благодарностью. Большое спасибо заранее!

Ответы [ 2 ]

1 голос
/ 01 мая 2019

Вы не передаете id handleDeleteFunction() здесь: 

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

Поэтому id всегда undefined, если вы регистрируетесь в handleDeleteFunction().

У вас есть два варианта для правильного прохождения id.

Опция 1: использовать функцию стрелки 

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

Опция 2: использовать связывание() 

<button onClick={this.handleDelete.bind(this, oneSavedArticle.id)}>Delete</button>
1 голос
/ 01 мая 2019

Проблема в том, что вы не передаете идентификатор функции 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>
    ) : (
...