Fonction d'incrémentation dans un tableau

Question

La fonction d'incrémentation dans l'extrait suivant incrémente le quatrième élément, le cinquième élément, puis le dernier élément (20)

Mon objectif est de faire augmenter chaque valeur numérique à partir du quatrième élément, en sautant les lettres.

Voici la ligne avec laquelle j'ai un problème:

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

Comment puis-je modifier ceci pour atteindre mon objectif?

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  ->   Index de l'élément dans le tableau
     *    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 (

           {this.state.data} 
             Cliquez ici   

      )
    }
}

ReactDOM.render(,  document.querySelector('.container'));

Answer 1

clicks était plus un index qu'un compteur de clics, donc je l'ai renommé en index.

Vous pouvez utiliser des expressions régulières avec String#split, donc vous pouvez combiner .replace(/\ \ /g,' ').split(' ') en .split(/\s+/).

J'ai déplacé l'instruction d'incrémentation de l'index dans la fonction d'incrémentation pour plus de simplicité et j'ai ajouté une vérification pour incrémenter à nouveau l'index si la valeur n'est pas un nombre.

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 (

                {this.state.data} 
                 Cliquez-moi   

        )
    }
}

ReactDOM.render(,  document.querySelector('.container'));