機能を増分アレイ

Question

に次のスニペットの増加関数は第4要素、第5要素は、最後の要素（20）

をインクリメントし、それは以降第四の要素からすべての数値をインクリメントするための私の目標であります、文字をスキップします。私は私の目標を達成するために、これを変更するにはどうすればよい

const indexAlteredElement = (clicksModulo) => (! clicksModulo % 3) ? 20 : clicksModulo+3; 

：

これは私が持つ問題を抱えているラインのですか？

JSBin

let clicks = 0; 
 
class App extends React.Component { 
 
    state = { 
 
     data:'M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999 L 175 0' 
 
    }; 
 

 
    onClick() { 
 
     clicks ++; 
 
     this.setState({data: this.increment()}); 
 
    } 
 

 
    /** 
 
    * clicks -> Element index in array 
 
    * 1 ----- ->4, 
 
    * 2 ---- -> 5. 
 
    * 3 ---- -> 7. 
 

 
    * 4 ----- ->4, 
 
    * 5 ---- -> 5. 
 
    * 6 ---- -> 7. 
 
    */ 
 
    increment() { 
 
     const data = this.state.data.replace(/\ \ /g, " ").split(" "); 
 
     const indexAlteredElement = (clicksModulo) => (! clicksModulo % 3) ? 20 : clicksModulo+3;    
 
     return data.map((e, i) => (i === indexAlteredElement(clicks%3)) ? parseInt(e)+5 : e).join(' ') 
 
    } 
 
    
 
    render() { 
 
     return (
 
     <div> 
 
      <div>{this.state.data} </div> 
 
      <button onClick={this.onClick.bind(this)} style={{fontSize:20}}> Click me </button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.querySelector('.container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<section class="container"></section>

Answer 1

clicksそれはクリックカウンタたよりも、インデックスのよりだったので、私はindexにそれを改名しました。

String#splitで正規表現を使用できるので、.replace(/\ \ /g,' ').split(' ')を.split(/\s+/)に組み合わせることができます。

簡略化のため、インクリメント機能にインクリメント機能を追加し、値が数値でない場合は、インデックスをもう一度インクリメントするチェックを追加しました。

let index = 2; 
 
class App extends React.Component { 
 
    state = { 
 
     data: 'M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999 L 175 0' 
 
    }; 
 

 
    onClick() { 
 
     this.setState({data: this.increment()}); 
 
    } 
 

 
    increment() { 
 
     const data = this.state.data.split(/\s+/); 
 
     if(!(++index % 3)) ++index; 
 
     if(index % data.length < 3) index = index + (index % data.length) + 2; 
 
     return data.map((e, i) => i === index % data.length? parseInt(e) + 5 : e).join(' '); 
 
    } 
 
    
 
    render() { 
 
     return (
 
     <div> 
 
      <div>{this.state.data} </div> 
 
      <button onClick={this.onClick.bind(this)} style={{fontSize:20}}> Click me </button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.querySelector('.container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<section class="container"></section>