Question

我正在编写一个REACT应用程序以显示一些评论。每个评论都有两个属性喜欢和不喜欢。我的主要组件的状态看起来像

state = {
    listings: [
        { key: 'key6', listingCity: 'City_Name', listingTitle: 'Restaurant_Name', likes: '3', dislikes: '1', listingBodyText: 'Review_Text' },
        { key: 'key7', listingCity: 'City_Name2', listingTitle: 'Restaurant_Name2', likes: '13', dislikes: '9', listingBodyText: 'Review_Text2' }
    ]
};

我想添加另一个属性，例如每个餐厅的得分，这将在喜欢和不喜欢之间有所不同。对于我的示例状态中的两家餐厅， 1.喜欢-3，不喜欢-1-得分= 2 2.喜欢-13，不喜欢-9-得分= 4

我正在尝试找出产生此分数的最佳方法。一种选择是，我为每家餐厅添加另一个属性，称为“得分”，并将其初始化为0。然后在componentDidMount()挂钩中计算该值。这对于初始计算将非常有效，但是现在每次用户想要/不喜欢时，我都必须调用此函数以获取更新的分数。

有没有一种方法可以将状态中的一个属性定义为其他两个属性的区别。就我而言，定义得分=喜欢-不喜欢

我对这个问题的主要目标是尝试并了解针对这种问题的推荐方法。

Answer 1

您可以为此创建一个单独的功能，并可以传递每个餐厅的钥匙：

const calScore = (key) => {
  const listings = (this?.state?.listings??[]).map(listing => {
     if(listing.key === key) {
       return {
           ...listing,
           score: listing?.likes - listing?.dislikes
       }
     } else {
        return {...listing}
     }
  })
  this.setState({ listings })
}

您可以在每次点赞/不喜欢点击后调用此功能

根据其他属性的值在反应中动态设置属性

1 个答案: