Redux狀態下的條件函數

Question

對於SVG元素，我已經在path d中構建了一個遞增按鈕，用於增加字符串（從n 3開始，每個數字加上20）。

增加按鈕確實在我的降低作用下，它工作正常

export default function svgs(state = [], action) { 
    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 last = max - 2; 
     let i = (state[a].index || 3) + 1; 
     if (i === last) i = 3; 
     if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 20; 
     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; 
    } 
} 

我的鬥爭是在SVG組件path d可消耗也不同的數據對象

例如

除了

path d={svg.d} 

它也可以有

path d={svg.d2} 
path d={svg.d3} 

看到的片段例如

<svg> 
    <svg> 
    <g> 
     <path d={svg.d}></path> 
    </g> 
    </svg> 
    <g> 
    <path d={svg.d2}></path> 
    <path d={svg.d3}></path> 
    </g> 
</svg> 

如何修改我的終極版功能，僅增加字符串或特定SVG元素串

我有一些SVG可以具有所有svg對象（svg.d, svg.d2, svg.d3）或僅兩個（svg.d, svg.d2）或一個（svg.d）的元素。

例如，如果我修改上面的那個終極版的功能，它可以像

let string = state[a].d || state[a].d2 || state[a].d3; 

然後

return [ 
    ...state.slice(0,a), // before the one we are updating 
    {...state[a], d: array.join(' '), index: i, d2: array.join(' '), index: i, d3: array.join(' '), index: i }, // updating 
    ...state.slice(a + 1), // after the one we are updating 
] 

這裏唯一的問題是，如果SVG元素之一具有一個或者在svg.d,svg.d2,svg.d3之間的兩個空對象，在點擊操作之後它獲得了相同的修改字符串值，而我不想這樣做。

希望解釋清楚，如果有必要，我會設置一個jsBin。

Answer 1

您可以映射在SVG對象，並單獨改造他們（如果存在的話）：

const aObj = state[a]; 
const [d, d2, d3] = [aObj.d, aObj.d2, aObj.d3].map((string) => { 
    if(!string) return null; 
    let array = string.split(" "); 
    let max = array.length; 
    let last = max - 2; 
    let i = (state[a].index || 3) + 1; 
    if (i === last) i = 3; 
    if (array[i] !== 'M' && array[i] !== 'L') array[i] = parseInt(array[i]) + 20; 
    return array.join(" "); 
    }); 


return [ 
    ...state.slice(0,a), // before the one we are updating 
    {...aObj, d, d2, d3}, // updating 
    ...state.slice(a + 1), // after the one we are updating 
] 

我不知道我完全理解這個問題雖然。