增量单击数组中的Redux函数

Question

我正在使用一些svg元素，我已经构建了一个增量按钮。

增量按钮采用path d值将其转换为数组，并从数组的第三个元素求和5 。 如果元素是'L'或'M'它什么都不做

这里是redux中的click函数，它采用递增动作状态的值

  const a = action.index;
  let string = state[a].d;

它转换为数组

let array = string.split(" ");

然后它完成我在循环中说的所有计算

查看完整的redux函数

  switch(action.type) {
    case 'INCREMENT_COORDINATES' :
      console.log("incrementing coordinaates")
      const a = action.index;
      let string = state[a].d;
      let array = string.split(" ");
      let max = array.length;
      let i = 3;
      let click = () => {
        i++;
        if ( i === max ) i = 3;
        if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5;
        array.join(' ');
      };
      return [
        ...state.slice(0,a), // before the one we are updating
        {...state[a], d: click()}, // updating the with the click function
        ...state.slice(a + 1), // after the one we are updating
      ]
    default:
      return state;
  }

请在调试时查看视频演示http://www.fastswf.com/uSBU68E

正如可以看到的代码不正确的计算，并将其求和5从第四元件和它返回的数量331 。 所以一切都很好！但问题是我需要将它作为'331'返回，这是继续循环的数组的新元素。

我已经使用相同的代码构建了一个完美的工作并完成我想要实现的演示！ 所以当我在redux函数中应用它时，我不明白我做错了什么。

看到jsBin完全按照我想要的方式工作。

Answer 1

编辑：

1. 您的click函数不返回任何值，因此未在任何位置分配array.join(' ')结果，并且属性d保持未分配状态。
   

   \n 让click =（）=> {\n   我++;\n   if（i === max）i = 3;\n   if（array [i]！=='M'&& array [i]！=='L'）array [i] = parseInt（array [i]）+ 5;\n   return array.join（''）; \n };\n

2. 每次调用increment_coordinates动作时，都会执行case 'INCREMENT_COORDINATES' :之后的块中的整个代码。 在这种情况下，重要的是变量i在每次调用中都是一个新变量，用3初始化。在执行click函数期间， i增加到4然后它超出了它的范围，因此它的值丢失了。
   
   我的建议是将当前索引包含在state （希望这会起作用并且我已经删除了click函数，因为它重新创建了每个调用并且只调用一次）
   
   请记住在第一次将坐标传递给reducer的行中也包含索引，或者检查state[a]是否包含属性index ，如果不是则设置i=3 。

   \n switch（action.type）{\n 案件'INCREMENT_COORDINATES'：\n   console.log（“递增coordinaates”）\n   const a = action.index;\n   let string = state [a] .d;\n   let array = string.split（“”）;\n   let max = array.length;\n   令i =（state [a] .index || 3）+ 1;\n   if（i === max）i = 3;\n   if（array [i]！=='M'&& array [i]！=='L'）array [i] = parseInt（array [i]）+ 5;\n   返回[\n     ... state.slice（0，a），//在我们更新的那个之前\n     {... state [a]，d：array.join（''）;  index：i}，//更新 \n     ... state.slice（a + 1），//在我们更新之后\n   ]\n 默认：\n   返回状态;\n }\n