javascript - 如何使用 Reducer 中的数组更新多个值

Question

我有以下代码来更新对象currentScore的。rubricItem这工作正常。

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更新一个。rubricItemscorItem

我知道我可以.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,
            }
        }
    };

有任何想法吗？

标签： javascriptreactjsredux

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