代码之家 › 专栏 › 技术社区 › user1019042

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

store redux typescript reactjs

user1019042 · 技术社区 · 5 年前

我的状态是这样的:

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

在我的Reducer中,我试图通过索引访问Book数组,并用一个新的数组替换它的Pages数组。我正在观察我的Google Chrome中的Redux值在值改变前后的变化。它将整个数组转换为一个对象。在redux中的“book”数组之前,它看起来像:

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

变更后:

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

如何在Redux中保持Book对象的原始显示?

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

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[]
          }
        }
    };
}

2 回复 | 直到 5 年前

Gabriel Ferrarini 5 年前

你能试试这个看看它是否有效吗?

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
        }))
    };
}

devserkan 5 年前

@加布里埃尔·费拉里尼的回答解决了你的问题,这就是为什么我投了反对票。但是,作为映射的另一种选择,我想提供一个不同的答案。因为你有一个现在的索引,你可以使用 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[] }
    })
  };
}

我们正在使用 对象分配 操作一个数组及其索引。同样,在不改变原始状态(使用扩展语法)的情况下,我们只需将页面指定为 newPages 对于 书 项目。

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

2 年前

universe11 · 对伊默来说,这是正确的还是错误的?

2 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

2 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

2 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

2 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

2 年前

geyser · React Redux toolkit-输入字段的状态管理

2 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

2 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

2 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

2 年前