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

已编辑：

您的click函数未返回任何值，因此array.join(' ')结果未分配到任何位置且属性d仍未分配。

let click = () => {
  i++;
  if ( i === max ) i = 3;
  if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5;
  return array.join(' '); 
};

每次调用increment_coordinates操作时，执行case 'INCREMENT_COORDINATES' :之后的块中的整个代码。在这种情况下，重要的是变量i在每个调用中都是一个新变量，用3初始化。在执行click函数期间，i增加到4然后它就会消失了＃ 39;范围因此其价值丢失。

我的建议是将当前索引包含在state中（希望这样可以解决click函数，因为它重新创建了每个调用并且只调用了一次
/>
请记住在第一次将坐标传递给reducer的地方也包含索引，或者检查state[a]是否包含属性index，如果没有则设置i=3。
```
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 = (state[a].index || 3) + 1;
  if ( i === max ) i = 3;
  if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 5;
  return [
    ...state.slice(0,a), // before the one we are updating
    {...state[a], d: array.join(' '); index: i}, // updating 
    ...state.slice(a + 1), // after the one we are updating
  ]
default:
  return state;
}
```

增加数组

1 个答案: