我的 reducer 的 switch 语句的一部分以意想不到的方式工作，请查看代码答案

【问题标题】：A part of a switch statement from my reducer works in an unexpected way, please take a look to the code我的 reducer 的 switch 语句的一部分以意想不到的方式工作，请查看代码
【发布时间】：2019-10-12 18:31:07
【问题描述】：

我的reducer中有这段代码（它的行为是在创建过程中发现的）

case 'UPDATE_GOAL':
   state.goals.map( el => {
      if (el.id === id*1) {el.goal = updatedGoal.goal}
   })
   return state

它工作正常，但我很困惑。 map() 函数应该返回一个新数组，然后我必须用一个新数组更新状态，但在这种情况下，它似乎直接将新数组返回给对象，并且状态更新以“错误的方式”

请帮助我了解它是如何工作的

【问题讨论】：

在这种情况下，状态变为可变的。我得到了这个，这个代码将被重构。但我关于 map() 的问题及其在这种情况下的行为对我来说仍然不清楚

标签： redux react-redux reducers

【解决方案1】：

是的，地图返回一个新数组。但问题是你正在改变这个数组中的对象，你不能用el.goal = updatedGoal.goal修改你的el。

当您使用map 函数时，几乎总是应该从它返回一些内容，而不是直接修改底层项目。

尝试完全按照redux recipes：

case 'UPDATE_GOAL':
    return state.goals.map((el, index) => {
        if (el.id !== id*1) {
            // This isn't the item we care about - keep it as-is
            return el
        }

        // Otherwise, this is the one we want - return an updated value
        return {
            ...el,
            goal: updatedGoal.goal
        }
    })

【讨论】：

谢谢，我明白了，但我的问题是——为什么在这种情况下 map() 函数会改变对象
抱歉，您可能还没有“明白”。 map 返回一个新数组，该数组的项是您从map 回调函数返回的项。您没有从回调函数返回任何内容，这是您的代码的第一个问题。（您也没有使用 map 调用的结果）。因此，您的地图不会返回任何内容（可能是 undefined 项目数组，我没有检查过）。地图改变数组的原因很简单。地图回调的参数是原始状态的原始项目。你直接用el.goal = updatedGoal.goal改变这个原始项目。