如何获取用户要保存的列表项的标题答案

【问题标题】：How can I get the title of the list item the user wants to save如何获取用户要保存的列表项的标题
【发布时间】：2020-05-12 03:18:16
【问题描述】：

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

这是填充列表的方式：

<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)
  })
};

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

【问题讨论】：

您无法访问组件内的键值。查看此 SO stackoverflow.com/questions/33682774/…
我尝试了 key 属性，因为它等于名称。尝试从 card.name 属性中获取数据对我来说会更容易吗？如果是这样，那么最好的方法是什么。
是的，但是您需要将其作为道具传递给您从中调用函数的任何组件。现在还不是很清楚您要做什么。 name 的值是否发生了变化？如果不是，您要保存什么以及保存到哪里？

标签： javascript reactjs rest

【解决方案1】：

您可以使用箭头函数并传递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 callback 的内联 cmets 并将卡作为 argument 传递给 saveCard。

【讨论】：

谢谢！我现在明白我做错了什么。