编辑

Question

我处于这种状态：

state
  books {}  <-- object
    book    <-- array
      pages <-- array

在我的reducer中，我试图按索引访问book数组，并用一个新的page数组替换它的pages数组。值更改前后，我正在Google Chrome中观察Redux值。它将整个数组转换为对象。在redux中的'book'数组之前，像这样：

book: [{...}, {...}, {...}]

更改后：

book: {{0: {...}, 1: {...}, 2: {...}}

如何在redux中保持我的书本对象的原始显示？

这是我的减速器中的代码：

export interface MyState {
  book: BookItem[];
  pages: Pages[];
}

function updatePages(index: number, state: MyState)  {
    // set up my new pages array here into newPages variable
    return {
        ...state,
        book: {
          ...state.book,
          [index]: {
            ...state.book[index],
            pages: newPages as Pages[]
          }
        }
    };
}

Answer 1

您可以尝试一下，看看是否有效吗？

function updatePages(index: number, state: MyState)  {
    // set up my new pages array here into newPages variable
    return {
        ...state,
        book: state.book.map(bk => ({
            ...bk,
            pages: newPages as Pages[]
        }))
    };
}

编辑

function updatePages(index: number, state: MyState)  {
    // set up my new pages array here into newPages variable
    return {
        ...state,
        book: state.book.map((bk, idx) => ({
            ...bk,
            pages: idx === index ? newPages as Pages[] : bk.pages
        }))
    };
}

Answer 2

@Gabriel Ferrarini的答案解决了您的问题，这就是为什么我支持它。但是，作为映射的替代方法，我想提供一个不同的答案。由于那里有当前索引，因此可以使用Object.assign来操纵book的页面。

function updatePages(index: number, state: MyState) {
  // newPages setup...
  return {
    ...state,
    book: Object.assign([], state.book, {
      [index]: { ...state.book[index], pages: newPages as Pages[] }
    })
  };
}

我们在这里使用Object.assign来操纵数组及其索引。同样，无需更改原始状态（使用扩展语法），我们只需将页面newPages分配为book。

通过特定索引更新响应状态会将数组更改为对象

2 个答案:

编辑