javascript - 正确更新/合并 React Redux 存储中的数组值，不重复

Question

我的初始状态如下所示，如果添加了新书或更改了价格，那么新的更新数组来自服务，我需要将其结果合并到我的初始状态。

const initialState = {
  booksData: [
    {"Code":"BK01","price":"5"},
    {"code":"BK02","price":"30"},
    {"code":"BK03","price":"332"},
    {"code":"BK04","price":"123"}
  ] 
};

来自服务器的更新数组有少量记录更新/新

data: [
  {"Code":"BK01","price":"10"},
  {"code":"BK02","price":"25"},       
  {"code":"BK05","price":"100"}
] 

更新后的状态应该是合并更新后的数组与旧数组。

booksData: [
  {"Code":"BK01","price":"10"},
  {"code":"BK02","price":"25"},
  {"code":"BK03","price":"332"},
  {"code":"BK04","price":"123"},
  {"code":"BK05","price":"100"}
] 

Answer 1

我会过滤掉新数据中旧数据的元素，然后合并。

const oldBooks = booksData.filter(book => !newData.some(newBook => newBook.code === book.code));
return oldBooks.concat(newData);

请记住，您不能将值压入旧数组。在您的 reducer 中，您必须创建新实例，这里是一个新数组。 'concat' 就是这样做的。