Tableau de mappage d'objets props réduit les valeurs (somme) dans les objets dans React

Question

J'ai plusieurs objets props et les passe dans un tableau. chaque objet contient une valeur de point. J'essaie de faire la somme de toutes les valeurs dans les objets et de passer le résultat dans le composant Statistiques sémantique-ui-réagir.

const withoutSpousePointsArray = [ 
      withoutSpouseAgePoint, 
      withoutSpouseLoePoint, 
      withoutSpouseOlpPoint, 
      withoutSpouseOlp2Point, 
      withoutSpouseExpPoint, 
      BwithSpouseLoePoint, 
      BwithSpouseOlpPoint, 
      BwithSpouseExpPoint, 
      skillEducation1Point, 
      skillEducation2Point, 
      skillFwe1Point, 
      skillFwe2Point, 
      skillCertificatePoint, 
      additionalPoint, 
]; 
const mapStateToProps = state => ({ 
    // core withSpouse states 
    withSpouseAgePoint: state.withSpouseAge, 
    withSpouseLoePoint: state.withSpouseLoe, 
    withSpouseOlpPoint: state.withSpouseOlp, 
    withSpouseOlp2Point: state.withSpouseOlp2, 
    withSpouseExpPoint: state.withSpouseExp, 
    // core withoutSpouse 
    withoutSpouseAgePoint: state.withoutSpouseAge, 
    withoutSpouseLoePoint: state.withoutSpouseLoe, 
    withoutSpouseOlpPoint: state.withoutSpouseOlp, 
    withoutSpouseOlp2Point: state.withoutSpouseOlp2, 
    withoutSpouseExpPoint: state.withoutSpouseExp, 
    // Spouse factor 
    BwithSpouseLoePoint: state.BwithSpouseLoe, 
    BwithSpouseOlpPoint: state.BwithSpouseOlp, 
    BwithSpouseExpPoint: state.BwithSpouseExp, 
    // skill transferability factors 
    skillEducation1Point: state.skillEducation1, 
    skillEducation2Point: state.skillEducation2, 
    skillFwe1Point: state.skillFwe1, 
    skillFwe2Point: state.skillFwe2, 
    skillCertificatePoint: state.skillCertificate, 
    // Additional 
    additionalPoint: state.additional, 
}); 

Comme il y a plusieurs objets que je .map() la valeur des points d'abord et .reduce() à la somme de toutes les valeurs. le résultat a montré comme

donc j'ai ajouté parsInt() le nombre par défaut mis à 0 mais quand j'expédie l'action, il m'a montré beaucoup de 0 encore et le nombre ne s'additionne pas correctement.

const withoutSpousePointSum = 
     withoutSpousePointsArray.map(points => points.point) 
     .reduce((acc, curr) => [parseInt(acc + curr)]); 

<Points key={shortid.generate()} color={"orange"} value={withoutSpousePointSum} label={"Points"} /> 

est-il une solution pour travailler correctement? Je vous remercie.

Answer 1

Quelques choses sur votre réduire la fonction:

• reduce devrait parser que la valeur actuelle
• parseInt devrait passer la base en tant que deuxième param pour forcer Parse décimale
• reduce doit passer dans la valeur initiale en tant que second param

-

const withoutSpousePointSum = 
    withoutSpousePointsArray 
    .map(points => points.point) 
    .reduce((acc, curr) => acc + parseInt(curr, 10), 0);