如何使用 Reducer 中的数组更新多个值答案

【问题标题】：How to update multiple values with an array inside Reducer如何使用 Reducer 中的数组更新多个值
【发布时间】：2020-04-13 08:34:14
【问题描述】：

我有以下代码来更新rubricItem 对象的currentScore。这很好用。

case SAVE_SCORELIST_SUCCESS:
    const scoreItem = action.payload.scoreItem;
    return {
        ...state,
        loading: false,
        editing: false,
        rubricItems: {
            ...state.rubricItems,
            [scoreItem.rubricItemId]: {
                ...state.rubricItems[scoreItem.rubricItemId],
                currentScore: scoreItem.currentScore,
            }
        }
    };

但是，我可能会收到一个包含多个 rubricItems 分数的数组对象，而不是像上面那样用单个 scorItem 更新单个 rubricItem。

我知道我可以使用.map() 来遍历数组：

scoreItems.map(si=>{})

但是，我不知道如何将其集成到此：

case SAVE_SCORELIST_SUCCESS:
    const scoreItems = action.payload.scoreItems;

    return {
        ...state,
        loading: false,
        editing: false,
        rubricItems: {
            ...state.rubricItems,
            [scoreItems[x].rubricItemId]: {
                ...state.rubricItems[scoreItems[x].rubricItemId],
                currentScore: scoreItems[x].currentScore,
            }
        }
    };

有什么想法吗？

【问题讨论】：

从rubricItems中取出更新item的逻辑。在有效负载上应用forEach 或map。然后将它们散布在一起。
@UtsavPatel 谢谢！怎么做：take out the logic of updating the item from the rubricItems?有什么例子吗？

标签： javascript reactjs redux

【解决方案1】：

你可以试试这个：

首先，您需要遍历 scoreItems 并创建一个更新后的分数项的 map 对象。

完成此操作后，您可以将spread 运算符与状态中的当前得分项目一起使用。

case SAVE_SCORELIST_SUCCESS:
let updatedScoreItems = {};
action.payload.scoreItem.forEach(scoreitem => {
  updatedScoreItems[scoreItem.rubricItemId] = {
    ...state.rubricItems[scoreItem.rubricItemId],
    currentScore: scoreItem.currentScore,
  }
})
return {
  ...state,
  loading: false,
  editing: false,
  rubricItems: {
    ...state.rubricItems,
    ...updatedScoreItems
  }
};

【讨论】：

【解决方案2】：

不要映射scoreItem，而是映射rubricItems，这样会更干净。

const updatedRubricItems = items.rubricItems.map(rubricItem => {
    const scoreForRubric = scoreItems.find(si => si.rubricItemId === rubricItem.id);// i assume you have some id for your rubric item
    if(scoreForRubric){
        return {...rubricItem, currentScore: scoreForRubric.currentScore}
    }else {
        return rubricItem
    }
});

return {
  ...state,
  loading: false,
  editing: false,
  rubricItems: updatedRubricItems
};

【讨论】：