在数组中递增 Click Redux 函数

Question

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

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

这里是redux中的click函数，它取自增action state的值

  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 仍未分配。
   

   让点击 = () => { 我++； 如果 ( i === 最大值 ) i = 3; if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5; 返回 array.join(' '); };

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

   开关（动作。类型）{ 案例“INCREMENT_COORDINATES”： console.log("递增坐标") 常量 a = action.index; 让字符串 = state[a].d; 让数组 = string.split(" "); 让 max = array.length; 让 i = (state[a].index || 3) + 1; 如果 ( i === 最大值 ) i = 3; if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5; 返回 [ ...state.slice(0,a), // 在我们要更新的那个之前 {...state[a], d: array.join(' '); index: i}, // 更新 ...state.slice(a + 1), // 在我们更新的那个之后 ] 默认： 返回状态； }