javascript - 需要帮助更新 redux reducer 中的操作有效负载数组

Question

我有一组从我的 API 返回的帖子，看起来像这样:

[
   {
     "id": 4311,
     "title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Polished) Handles",
     "liked": false
    },
    {
      "id": 2235,
      "title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Brushed) Handles",
      "liked": false
    }
]

然后我有另一个名为“wishlist”的存储数组，如下所示:

[
    {
      "id": 4311,
      "title": "C43- Miami Bow Cabinet Handles High Quality Stainless Steel (Polished) Handles",
      "liked": true
    }
]

我想要做的是测试每个帖子是否在愿望 list 数组中并更新该帖子的“喜欢”键。在本例中，id 为 4311 的帖子位于愿望 list 数组中，因此应将其键“liked”更新为 true。我无法执行 arr.includes() 因为 posts 数组中的帖子与愿望 list 数组中的帖子不匹配(因为“喜欢”键不同)。

这就是我的想法:

1. 按 ID 标准化愿望 list
2. 然后映射 posts 数组并检查 id 是否匹配
3. 更新该帖子的点赞键

我已经完成了步骤 1 和 2，这是我的 javascript:

  // lets normalize our list of ids
  let wishlistByID = state.wishlist.map(function(post) {
    return post['id']                      
  })

  // now lets map our posts array and see if the id's match
  let inWishlist = action.posts.map(function(post) {
    return wishlistByID.includes(post['id'])
// returns true when they match
  }) 

但我不确定如何执行第 3 步。这里是我的 reducer 供引用:

  return {
    ...state,
    posts: action.posts,
    isFetching: false,
  }

感谢任何帮助 - 这也解决了我的另一个悬而未决的问题

**更新 - 感谢 @Giang Lee 的帮助，我创建了一个新的 posts 常量，它映射帖子，如果该帖子的 id 与 WishlistByID 数组匹配，则只需更新 Like 的键。

  // lets normalize our list of ids
  let wishlistByID = state.wishlist.map(function(post) {
    return post['id']                      
  })

  // now lets map our posts array and see if the id's match
  // den just up the liked key to true
  const posts = action.posts.map(function(post) {
    if(wishlistByID.includes(post['id'])) {
      post['liked'] = true
    }
    return post
  })   

  return {
    ...state,
    posts: posts,
    isFetching: false,

Answer 1

试试我的方法

const posts = state.posts.map((item) => {
 const post = action.posts.find(p => p.id === item.id);
 return post ? post : item;
});

return {
    ...state,
    posts,
    isFetching: false,
  }