Appliquer opération mathématique en temps réel à dire dans React, provoquer des changements dans la production/État/dom

Question

Ceci est le point de départ de mon erreur:

Ce que je suis en train de faire est de prendre simplement ce nombre et effectuer l'opération mathématique de multiplication sur elle - dans ce cas, en le multipliant par 0.2 - cependant - mon programme contient un bogue odieux qui - plutôt que d'effectuer cette opération - ajoute simplement 20 à la chaîne dans la zone de texte, comme vous pouvez voir ici:

C'est le code que j'essaie d'utiliser pour appliquer la logique opératoire, pour moi, cela semble parfaitement raisonnable - même si je ne suis pas un expert de classe mondiale en JavaScript, ni React. Y a-t-il quelque chose qui cloche de façon flagrante dans l'extrait de code suivant?

addLogicToEquation(newLogic) { 
    let equation = this.state.equation 

    if(newLogic==="10%"){ 
    let newEquation = equation + (equation * 0.10) 
    this.setState({equation: newEquation}) 
    } 
    if (newLogic==="15%"){ 
    let newEquation = equation + (equation * 0.15) 
    this.setState({equation: newEquation}) 
    } 
    if (newLogic==="20%"){ 
    let newEquation = equation + (equation * 0.20) 
    this.setState({equation: newEquation}) 
    } 
    else{ 
    // we're adding more numbers 
    let newEquation = equation + newLogic 
    this.setState({equation: newEquation}) 
    } 
} 

Peut-être cet extrait est raisonnable, et le défaut est ailleurs dans mon PROGRAM- Je suis vraiment même pas sûr où commencer à chercher, la complete codebase se trouvent ici, il n'y a pas vraiment très voluminous- quelque chose sur le ordre de 10 fichiers ou plus.

Answer 1

Lorsque vous tirez la valeur de this.state.equation il renvoie une chaîne. Vous voudrez le convertir en nombre pour pouvoir effectuer des opérations mathématiques dessus. En javascript pour concaténer les chaînes, l'opérateur + est utilisé, de sorte qu'il traite votre équation comme une concaténation de chaîne. Pour résoudre facilement ce problème, convertissez la valeur de l'équation dans l'état en un nombre lorsque vous gérez l'affectation initiale. let equation = Number(this.state.equation). Voici un code complet:

addLogicToEquation(newLogic) { 
    let equation = Number(this.state.equation) 

    if(newLogic==="10%"){ 
    let newEquation = equation + (equation * 0.10) 
    this.setState({equation: newEquation}) 
    } 
    if (newLogic==="15%"){ 
    let newEquation = equation + (equation * 0.15) 
    this.setState({equation: newEquation}) 
    } 
    if (newLogic==="20%"){ 
    let newEquation = equation + (equation * 0.20) 
    this.setState({equation: newEquation}) 
    } 
    else{ 
    // we're adding more numbers 
    let newEquation = equation + newLogic 
    this.setState({equation: newEquation}) 
    } 
} 

Je voudrais aussi faire la recommandation à refactoriser à ce qui suit:

addLogicToEquation(newLogic) { 
    let equation = Number(this.state.equation); 
    let newEquation = equation; 

    if (newLogic.includes("%")) { 
    const percent = Number(newLogic.replace('%', ''))/100; 
    newEquation += (equation * percent); 
    } else { 
    newEquation += newLogic; 
    } 

    this.setState({ equation: newEquation }); 
} 

Cela permettra de vous de modifier facilement l'un des pourcentages sans avoir à faire un tas de changements. Ce sera beaucoup plus facile à maintenir.

Answer 2

Je suppose que newLogic contient ici la chaîne "20".

En JavaScript, si vous ajoutez un numéro à une chaîne, les deux parties seront converties en une chaîne et concaténées:

var out = 100 + "20"; // "10020" 

Pour forcer un ajout à la place, convertir explicitement la chaîne à un numéro, par exemple en utilisant le préfixe +:

var out = 100 + +"20"; // 120 

Answer 3

Vous devez lancer votre chaîne à un flotteur avant l'opération:

const string = "100"; 
const casted = parseFloat(string); 
const output = casted + (casted * 0.15); 

Bien sûr, vous pouvez simplement utiliser 1,15 à la place et éviter l'ajout

const output = parseFloat("100") * 1.15;