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

javascript reactjs redux

2022-08-30 02:59:58

我有一个问题，重新呈现状态会导致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

答案 1

您可以使用 .下面是一个示例实现：map

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

答案 2

您可以使用 React Immutability 帮助程序

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