使用......传播,但redux仍然会对状态突变发出警告

Syb*_*ric 3 javascript reactjs redux react-redux

Redux在发送时抛出警告:

Error: A state mutation was detected inside a dispatch, in the path: 
roundHistory.2.tickets. Take a look at the reducer(s) handling the action {"type":"ARCHIVE_TICKETS","roundId":"575acd8373e574282ef18717","data":[{"_id":"575acd9573e574282ef18718","value":7,"user_id":"574c72156f355fc723ecdbbf","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575acd9573e574282ef18719","value":9,"user_id":"574c72156f355fc723ecdbbf","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575acd9573e574282ef1871a","value":8,"user_id":"574c72156f355fc723ecdbbf","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575acdac73e574282ef1871b","value":19,"user_id":"574c72156f355fc723ecdbbf","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575ad50c4c17851c12a3ec23","value":29,"user_id":"57522f0b1f08fc4257b9cbc6","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575ad50c4c17851c12a3ec24","value":28,"user_id":"57522f0b1f08fc4257b9cbc6","round_id":"575acd8373e574282ef18717","__v":0},{"_id":"575ad
Run Code Online (Sandbox Code Playgroud)

唯一的减速机处理ARCHIVE_TICKETS动作是这样的:

case 'ARCHIVE_TICKETS' :
  var archive = [...state.roundHistory];
  for (var i in archive) {
    if (archive[i]._id === action.roundId) {
      archive[i].tickets = action.data;
    }
  }
  return Object.assign({}, state, {
    roundHistory: archive
  });
Run Code Online (Sandbox Code Playgroud)

如果我使用[...传播],它怎么能改变状态呢?

Bo *_*son 12

[...state.roundHistory]这里类似[].concat(state.roundHistory).它创建一个新的数组,但对象数组与共享state.roundHistory.如果你想改变它们,你需要复制每个项目.

您可以使用此方法Object.assign,类似于您为返回值所做的操作:

var archive = state.roundHistory.map(value => Object.assign({}, value));
Run Code Online (Sandbox Code Playgroud)

或者(正如您在自己的答案中所建议的那样),您可以使用对象扩展表示法:

var archive = state.roundHistory.map(value => {...value});
Run Code Online (Sandbox Code Playgroud)