时间戳

首页 > 解决方案 > 组件未更新 - 如何使用密钥的问题

reactjs - 组件未更新 - 如何使用密钥的问题

问题描述

我有一个跨站点使用的卡片组件。当数据更新时，卡片不会完全更新，或者如果它更改为另一张卡片，它有时会在卡片中保留前一张卡片中的信息。不会一直变化的信息是从函数this.renderPrice()、this.renderPerks()和呈现的区域this.renderButtons()。我已经尝试向实际组件添加一个密钥，并且当从另一个组件调用该组件时，但似乎都没有解决问题。

 class ChooseMembershipCard extends React.Component {
  return(
   <div className="membership_card" key={this.props.product.id}>
    <h6 className="membership_banner">{this.renderSpotsAvailable()}</h6>
    <h6 className="membership_title">{this.props.product.title}</h6>
    {this.renderPrice()}
    <p className="membership_description">{this.props.product.description}</p>
    {this.renderPerks()}
    <div style={{padding: 10, marginTop: 20}}>
      {this.renderButtons()}
    </div>
   </div>
 )
 export default ChooseMembershipCard

我在这个组件中使用，我尝试将密钥添加到组件中，但似乎没有什么区别

   return (
     <ChooseMembershipCard
      key={this.state.products[this.state.selectedProductIndex]}
      product={this.state.products[this.state.selectedProductIndex]}
      isUser={this.state.isUser}
      selectedProductIndex={this.state.selectedProductIndex}
      monthlyFrequency={this.state.monthlyFrequency}
      userHasSubscription={this.userHasSubscription}
      loadUser={this.props.loadUser}
     />
   )

然后我在这里对产品进行映射，并为每个产品绘制一张卡片。当我内联更新信息时，数据会保存并更新，但实际组件不会重新渲染，因此除非刷新页面，否则不会看到更新的信息。

renderProducts() {
    return this.state.products.map((product, i) => {
      return (
        <ChooseMembershipCard
          key={product.id}
          product={product}
          isUser={true}
          isEditable={true}
          archiveProduct={this.archiveProduct}
          editProduct={this.editProduct}
        />
      )
    })
  }

在上面的例子中，我总是得到 1 个错误： ChooseMembershipCard: "key" is not a prop. Trying to access it will result in "undefined" being returned. If you need to access the same value within the child component, you should pass it as a different prop.

但是，如果我删除密钥，则会收到此错误： Each child in a list should have a unique "key" prop.

我觉得问题是如何key使用。任何见解表示赞赏！

标签： reactjs

解决方案

您正在传递key到 ChooseMembershipCard 组件。为什么在分配到该 div 时不使用相同的键道具。

class ChooseMembershipCard extends React.Component {
  return(
   <div className="membership_card" key={this.props.key}>
    <h6 className="membership_banner">{this.renderSpotsAvailable()}</h6>
    <h6 className="membership_title">{this.props.product.title}</h6>
    {this.renderPrice()}
    <p className="membership_description">{this.props.product.description}</p>
    {this.renderPerks()}
    <div style={{padding: 10, marginTop: 20}}>
      {this.renderButtons()}
    </div>
   </div>
 )
 export default ChooseMembershipCard

您需要向多次呈现的组件添加密钥。在renderProducts()map 函数中，您添加了 key prop，但您实际上并未将其分配给 ChooseMembershipCard 组件，而是将名为 key 的 prop 传递给该组件，并且您没有在代码中的任何地方使用它。

推荐阅读