在数组中递增 Click Redux 函数

Posted 2023-02-22

【中文标题】在数组中递增 Click Redux 函数

【英文标题】：Incrementing Click Redux Function in an array

【发布时间】：2017-06-29 23:23:33

【问题描述】：

我正在使用一些 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 完全按照我的意愿工作。

【参考方案1】：

已编辑：

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

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

每次调用 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), // 在我们更新的那个之后 ] 默认： 返回状态；

【讨论】：

是的，将数字转换为字符串不是我的问题，那我做错了什么？

现在我看到你的函数click 没有返回任何值，因此d 在更新的项目中没有任何值。将其最后一行切换为return array.join(' ');。它能解决你的问题吗？

正确，这是click函数中array.join（''）的目的，将新值粘贴到d路径中，目前它似乎被忽略了，你的意思是最后一行?更新答案以接受它

你的i 不也是在每次调用增量时设置为 3 吗？考虑将其存储为状态对象的属性

是的，因为每次调用增量操作时，都会创建使用关键字let 定义的所有这些变量。在这种情况下，let i=3 会导致此问题。最好将您的状态对象更改为array: arrayOfCoordinates, currentIndex: i