如何更新特定数组项中的单个值

我有一个问题，重新呈现状态导致 ui 问题，并建议只更新我的减速器内的特定值，以减少重新呈现页面的数量。

这就是我的状态

{
name: "some name",
subtitle: "some subtitle",
contents: [
{title: "some title", text: "some text"},
{title: "some other title", text: "some other text"}
]
}

我现在正在这样更新它

case 'SOME_ACTION':
return { ...state, contents: action.payload }

其中 action.payload是包含新值的整个数组。但是现在我实际上只需要更新内容数组中第二个项目的文本，这样的操作不起作用

case 'SOME_ACTION':
return { ...state, contents[1].text: action.payload }

其中 action.payload现在是一个文本，我需要更新。

158683 次浏览
小开

你不必把所有事情都排在一行里:

case 'SOME_ACTION': {
const newState = { ...state };
newState.contents =
[
newState.contents[0],
{title: newState.contents[1].title, text: action.payload}
];
return newState
};
小开
最佳答案

你可以用 反应不变帮手

import update from 'react-addons-update';


// ...


case 'SOME_ACTION':
return update(state, {
contents: {
1: {
text: {$set: action.payload}
}
}
});

不过我猜你可能会做更像这样的事？

case 'SOME_ACTION':
return update(state, {
contents: {
[action.id]: {
text: {$set: action.payload}
}
}
});
小开

您可以使用 map:

case 'SOME_ACTION':
return {
...state,
contents: state.contents.map(
(content, i) => i === 1 ? {...content, text: action.payload}
: content
)
}
小开

虽然为时已晚，但这里有一个适用于每个索引值的通用解决方案。

  1. 创建一个新数组并将其从旧数组扩展到要更改的 index。

  2. 添加所需的数据。

  3. 创建一个新数组，并将其从要更改的 index扩展到数组的末尾

let index=1;// probably action.payload.id
case 'SOME_ACTION':
return {
...state,
contents: [
...state.contents.slice(0,index),
{title: "some other title", text: "some other text"},
...state.contents.slice(index+1)
]
}

更新:

我做了一个小模块来简化代码，所以你只需要调用一个函数:

case 'SOME_ACTION':
return {
...state,
contents: insertIntoArray(state.contents,index, {title: "some title", text: "some text"})
}

有关更多示例，请参见 储存库

功能签署:

insertIntoArray(originalArray,insertionIndex,newData)

编辑: 还有 不要动库，它可以处理各种值，而且它们也可以被深度嵌套。

小开

我相信当您需要在您的 Redux 状态 传播操作员是你的朋友上执行这种操作时，这个原则适用于所有的子系统。

让我们假设这是你的状态:

const state = {
houses: {
gryffindor: {
points: 15
},
ravenclaw: {
points: 18
},
hufflepuff: {
points: 7
},
slytherin: {
points: 5
}
}
}

你想给拉文克劳加3分

const key = "ravenclaw";
return {
...state, // copy state
houses: {
...state.houses, // copy houses
[key]: {  // update one specific house (using Computed Property syntax)
...state.houses[key],  // copy that specific house's properties
points: state.houses[key].points + 3   // update its `points` property
}
}
}

通过使用扩展运算符，您只能更新新状态，而其他所有状态都保持不变。

例子从这个 很棒的文章，你可以找到几乎每一个可能的选项与伟大的例子。

小开

在我的案例中，我做了类似的事情，基于路易斯的回答:

// ...State object...
userInfo = {
name: '...',
...
}


// ...Reducer's code...
case CHANGED_INFO:
return {
...state,
userInfo: {
...state.userInfo,
// I'm sending the arguments like this: changeInfo({ id: e.target.id, value: e.target.value }) and use them as below in reducer!
[action.data.id]: action.data.value,
},
};
小开

我的一个项目就是这么做的:

const markdownSaveActionCreator = (newMarkdownLocation, newMarkdownToSave) => ({
type: MARKDOWN_SAVE,
saveLocation: newMarkdownLocation,
savedMarkdownInLocation: newMarkdownToSave
});


const markdownSaveReducer = (state = MARKDOWN_SAVED_ARRAY_DEFAULT, action) => {
let objTemp = {
saveLocation: action.saveLocation,
savedMarkdownInLocation: action.savedMarkdownInLocation
};


switch(action.type) {
case MARKDOWN_SAVE:
return(
state.map(i => {
if (i.saveLocation === objTemp.saveLocation) {
return Object.assign({}, i, objTemp);
}
return i;
})
);
default:
return state;
}
};
小开

我担心使用数组的 map()方法可能会很昂贵，因为要迭代整个数组。相反，我组合了一个由三部分组成的新数组:

  • Head -修改项之前的项
  • 修改过的项目
  • Tail -修改项之后的项

下面是我在代码中使用的例子(NgRx，但其他 Redux 实现的机制是相同的) :

// toggle done property: true to false, or false to true


function (state, action) {
const todos = state.todos;
const todoIdx = todos.findIndex(t => t.id === action.id);


const todoObj = todos[todoIdx];
const newTodoObj = { ...todoObj, done: !todoObj.done };


const head = todos.slice(0, todoIdx - 1);
const tail = todos.slice(todoIdx + 1);
const newTodos = [...head, newTodoObj, ...tail];
}
小开

这在 redux-toolkit 中非常容易，它使用 Immer 来帮助您编写看起来像可变的不可变代码，这样更简洁、更容易阅读。

// it looks like the state is mutated, but under the hood Immer keeps track of
// every changes and create a new state for you
state.x = newValue;

因此，不必使用扩展算子在正常的还原减速器

return {
...state,
contents: state.contents.map(
(content, i) => i === 1 ? {...content, text: action.payload}
: content
)
}

您可以简单地重新分配本地值，然后让 Immer 为您处理其余的事情:

state.contents[1].text = action.payload;

现场演示

Edit 35628774/how-to-update-single-value-inside-specific-array-item-in-redux

小开

注意数据结构: 在一个项目中，我有这样的数据 state:{comments:{items:[{...},{...},{...},...]} 并且在 物品中更新一个 项目，我这样做

case actionTypes.UPDATE_COMMENT:
const indexComment = state.comments.items.findIndex(
(comment) => comment.id === action.payload.data.id,
);
return {
...state,
comments: {
...state.comments,
items: state.comments.items.map((el, index) =>
index === indexComment ? { ...el, ...action.payload.data } : el,
),
},
};
小开

Js (一个令人惊奇的反应/rn/redux 友好包)非常有效地解决了这个问题。Redux 存储由不可变的数据组成-immer 允许您清晰地更新存储的数据编码，就好像数据不是不可变的一样。

下面是他们文档中的 redux 示例: (请注意方法周围的 product () ，这是 reducer 设置中唯一的变化。)

import produce from "immer"


// Reducer with initial state
const INITIAL_STATE = [
/* bunch of todos */
]


const todosReducer = produce((draft, action) => {
switch (action.type) {
case "toggle":
const todo = draft.find(todo => todo.id === action.id)
todo.done = !todo.done
break
case "add":
draft.push({
id: action.id,
title: "A new todo",
done: false
})
break
default:
break
}
})

(有人提到 immer 是 redux-toolkit 的副作用，但是您应该直接在减速器中使用 immer。)

固定装置: Https://immerjs.github.io/immer/installation


提交答案