根据其他属性的值动态设置属性答案

【问题标题】：Setting properties dynamically in react based on value of other properties根据其他属性的值动态设置属性
【发布时间】：2020-05-31 06:56:32
【问题描述】：

我正在编写一个 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

我正在尝试找出生成此分数的最佳方法。一种选择是我为每家餐厅添加另一个名为 score 的属性，并将其在状态中初始化为 0。然后在componentDidMount() 钩子中，计算这个值。这对于初始计算很有效，但是现在每次用户喜欢/不喜欢我都必须调用这个函数来获得更新的分数。

有没有办法将状态中的属性定义为其他两个属性的差异。在我的例子中，定义 score = likes - dislikes

我对这个问题的主要目标是尝试了解解决此类问题的推荐方法。

【问题讨论】：

你可以这样做：state.listings.map(val=>{ val.score = val.likes - val.dislikes; return val; })
@gorak - 所以我会将其初始化为 0，然后在组件安装期间计算它，并且每次都会更新任何喜欢/不喜欢的内容？
你打算在哪里使用这个属性？如果你已经有了好恶，那么你可以直接使用它们吗？像这样likes-dislikes?
@UtsavPatel 当我在最终列表页面上显示评论时，我想根据此评级订购它们。所以我想弄清楚我是否应该即时执行此操作或存储在该州。
@VikG 你应该在飞行中完成它们。在这个用例中，我认为创建另一个属性没有任何好处。

标签： javascript reactjs react-native state

【解决方案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 })
}

您可以在每次喜欢/不喜欢点击后调用此函数

【讨论】：

感谢分享这个@shubham-chitransh，我会将这些添加到我喜欢/不喜欢的处理程序中。