在数组中递增点击Redux函数 [英] Incrementing Click Redux Function in an array

问题描述

我正在处理某些svg元素，并且建立了一个增量按钮.

I am working with some svg elements and i have built an increment button.

递增按钮采用path d值将其转换为数组，并从数组的第三个元素求和5.如果元素是'L'或'M'，则不执行任何操作

The increment button takes the the path d values converts it into an array and sums 5 from the third element of the array. If the element is 'L' or 'M' it does nothing

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

Here the click function in the redux, it takes the values of the incrementing action state

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

它将转换为数组

let array = string.split(" ");

然后执行我在循环中所说的所有计算

and then it does all the calculation i said in the loop

查看完整的redux功能

See the full redux function

  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

See the video demo while i debug it http://www.fastswf.com/uSBU68E

如您所见，该代码进行了正确的计算，并且将第四个元素的5相加，并返回数字331.一切都很好！但是问题是我需要将其返回为'331'，这是数组的新元素才能继续循环.

As you can see the code does the right calculation and it sums 5 from the fourth element and it is returning the number 331. So all good!But the problem is that i need to return it as '331', a new element of the array to continue the loop.

我使用相同的代码构建了一个演示，该演示可以完美地工作并完成我想要实现的目标！因此，当我在redux函数中应用它时，我不明白我在做什么错.

I have built a demo which is perfectly working and doing what i want to achieve, using the same code! So i don't understand what i am doing wrong when i apply it in my redux function.

请参见 jsBin 完全按我的意愿工作.

See the jsBin perfectly working as i want.

推荐答案

1. 您的click函数不会返回任何值，因此array.join(' ')结果不会分配到任何地方，并且属性d仍未分配.
   

1. Your click function doesn't return any value, so array.join(' ') result isn't assigned anywhere and property d remains unassigned.
   

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

每次调用incidence_coordinates动作时，在执行case 'INCREMENT_COORDINATES' :之后的块中的整个代码.在这种情况下，重要的是变量i在每个调用中都是一个用3初始化的新变量.在click函数执行期间，i增加到4，然后超出范围，因此其值丢失.

我的建议是在state中包含当前索引(希望这会起作用&我已经删除了click函数，因为它是重新创建每个调用并且仅被调用一次).

记住，在第一次将坐标传递到化径器的位置也要包含索引，或者检查state[a]是否包含属性index，如果没有，请设置i=3.

Each time increment_coordinates action is invoked, whole code in block after case 'INCREMENT_COORDINATES' : is executed. In this case important is that variable i is in each call a new variable, initialized with 3. During execution of click function, i increases to 4 and then it goes out of it's scope so its value is lost.

My suggestion is to include current index in state (hope this would work & I've removed click function as it's each call re-created and only once invoked)

Remember to include index also in line where you pass your coordinates for the first time to your reducer or check whether state[a] contains property index and set i=3 if not.

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;
}

这篇关于在数组中递增点击Redux函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！