时间戳

首页 > 解决方案 > 如何获取用户要保存的列表项的标题

javascript - 如何获取用户要保存的列表项的标题

问题描述

当用户单击“保存卡”按钮并将其设置为状态时，我试图获取列表项的标题。我尝试了几种不同的方法，但控制台日志一直显示空白行。

这是列表的填充方式： 

<Col sm="12" md="7">
  <h1 style={{ textAlign: 'center', color: '#fff' }}>Results</h1>
  {this.state.cards.length ? (
    <List>
      {console.log(this.state.cards)};
      {this.state.cards.map((card) => {
        return (
          <ListItem style={{ textAlign: 'left' }} key={card.name}>
            {card.layout === 'transform' ? (
              <div>
                <img
                  className="cardImg"
                  src={card.card_faces[1].image_uris.small}
                  alt={card.card_faces[1].name}
                />
                <img
                  className="cardImg"
                  src={card.card_faces[0].image_uris.small}
                  alt={card.card_faces[0].name}
                />
              </div>
            ) : (
              <img
                className="cardImg"
                src={card.image_uris.small}
                alt={card.name}
              />
            )}
            <h4>{card.name}</h4>
            <h6>{card.mana_cost}</h6>
            <h6>{card.type_line}</h6>
            <h6>{card.set_name}</h6>
            <h6>{card.rarity}</h6>
            {card.layout === 'transform' ? (
              <div>
                <p>
                  {card.card_faces[0].name}: {card.card_faces[0].oracle_text}
                </p>
                <p>
                  {card.card_faces[1].name}: {card.card_faces[1].oracle_text}
                </p>
              </div>
            ) : (
              <p>{card.oracle_text}</p>
            )}
            <p>Commander Legality: {card.legalities.commander}</p>
            <p>Price in USD: {this.checkPrice(card.prices.usd)}</p>
            <p>Foil Price in USD: {this.checkPrice(card.prices.usd_foil)}</p>
            {sessionStorage.getItem('user') !== null ||
            this.state.username !== '' ? (
              <SaveBtn
                onClick={this.saveCard}
                className="submitBtn save-btn btn"
                style={{ backgroundColor: '#4e7781', color: '#fff' }}
              />
            ) : (
              ''
            )}
          </ListItem>
        )
      })}
    </List>
  ) : (
    <h3 style={{ textAlign: 'center', color: '#fff' }}>
      No Results to Display
    </h3>
  )}
</Col>

这就是我目前尝试获取名称的方式：

saveCard = (event) => {

  this.setState({
    cardName: this.key
  });
  console.log(this.state.cardName)

  API.SaveCard({
    name: this.cardName
  })
  .then((response) => {
    console.log("saved following card")
    console.log(response)
  })
};

任何帮助将不胜感激，这里也是我的仓库的链接，此代码位于 src 内 pages 文件夹中的 Database.js 中。 https://github.com/EricVincitore/command-central

标签： javascriptreactjsrest

解决方案

您可以使用箭头函数并传递card对象：

<SaveBtn
  onClick={() => this.saveCard(card)}
  className="submitBtn save-btn btn"
  style={{ backgroundColor: '#4e7781', color: '#fff' }}
/>

并处理它：

saveCard = (card) => {

  this.setState({
    cardName: card.name
  }, () => {
    console.log(this.state.cardName) // this prints correct cardName (we used callback)
  });

  console.log(this.state.cardName) // this will not print the correct card name because setState is async / batch operation

  API.SaveCard({
    name: card.name // use card object Or move this code in callback shown above
  })
  .then((response) => {
    console.log("saved following card")
    console.log(response)
  })
};

请注意关于setState 回调和将 card 作为参数传递给saveCard.

推荐阅读