Reactjs 将数组项替换为另一个而不改变状态

以下是我的状态的示例：

const INITIAL_STATE = {
 contents: [ {}, {}, {}, etc.. ],
 meta: {}
}

我需要能够并以某种方式替换内容数组中的一个项目，知道它的索引，我尝试过：

      return {
        ...state,
        contents: [
          ...state.contents[action.meta.index],
          {
            content_type: 7,
            content_body: {
              album_artwork_url: action.payload.data.album.images[1].url,
              preview_url: action.payload.data.preview_url,
              title: action.payload.data.name,
              subtitle: action.payload.data.artists[0].name,
              spotify_link: action.payload.data.external_urls.spotify
            }
          }
        ]
      }

---

其中

action.meta.index

是我想用另一个contents对象替换的数组项的索引，但我相信这只是将整个数组替换为我传递的一个对象。我还想过使用

.splice（）

，但那只会改变数组？

splice

改变需要使用

Slice

的数组。您还需要

concat

切片

return Object.assign({}, state,  {
         contents:
          state.contents.slice(0,action.meta.index)
          .concat([{
            content_type: 7,
            content_body: {
              album_artwork_url: action.payload.data.album.images[1].url,
              preview_url: action.payload.data.preview_url,
              title: action.payload.data.name,
              subtitle: action.payload.data.artists[0].name,
              spotify_link: action.payload.data.external_urls.spotify
            }
          }])
          .concat(state.contents.slice(action.meta.index + 1))
  }

---

以@sapy的正确答案为基础。我想向您展示另一个示例，说明如何在不改变状态的情况下在Redux中更改数组中对象的属性

在我所在的州，我有一系列的

订单

。每个

顺序

都是一个包含许多属性和值的对象。但是，我只想更改

note

属性。像这样的事情

let orders = [order1_Obj, order2_obj, order3_obj, order4_obj];

例如，

order3_obj={注：''，总计：50.50，项目：4，交货日期：'07/26/2016'}

因此，在我的Reducer中，我有以下代码：

return Object.assign({}, state,
{
  orders: 
    state.orders.slice(0, action.index)
    .concat([{
      ...state.orders[action.index],
      notes: action.notes 
    }])
    .concat(state.orders.slice(action.index + 1))
   })

因此，基本上，您正在执行以下操作：

1） 在命令3\u obj

so

[order1\u obj，order2\u obj]之前切掉数组

2） 通过使用三点

..

排列运算符和要更改的特定属性（即

注释
），对编辑的
order3_obj
进行压缩（即添加）

3） 在orders数组的其余部分使用
.Concat
和
在
末尾使用
和
切片
.Concat（state.orders.slice（action.index+1））
这是在
order3\u obj
之后的所有内容（在本例中，
order4\u obj
是唯一剩下的部分）。
注意
数组.prototype.map（）
（）不对原始数组进行变异，以便它提供另一个选项：

 const INITIAL_STATE = {
   contents: [ {}, {}, {}, etc.. ],
   meta: {}
 }

 // Assuming this action object design
 {
   type: MY_ACTION,
   data: {
     // new content to replace
   },
   meta: {
     index: /* the array index in state */,
   }
 }

 function myReducer(state = INITIAL_STATE, action) {
   switch (action.type) {
     case MY_ACTION: 
       return {
         ...state,
         // optional 2nd arg in callback is the array index
         contents: state.contents.map((content, index) => {
           if (index === action.meta.index) {
             return action.data
           }

           return content
         })
       }
   }
 }

已编辑。我猜您正在尝试发送整个状态，内容值已更改。因此，请使用Object.assign发送新状态，如果Object.assign中的同一密钥有多个源，则最后一个源将获胜。另外，请看一下React的不变性帮助程序-它们不像看起来那么难用，并且确实使您的代码更易于阅读。非常感谢！这对我帮助很大。这绝对是最优雅的解决方案。