增量单击数组中的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保持未分配状态。
   

   让点击 = () => {
     我++;
     if ( i === max ) i = 3;
     if (数组[i] !== 'M' && 数组[i] !== 'L') 数组[i] = parseInt(数组[i]) + 5;
     return array.join(' ');
   };
   

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

stateclick

state[a]indexi=3

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