Éclate une chaîne en javascript, reactjs

Question

donc je développe une application quiz en quelque sorte, si this est mon état initial de l'application lors de son lancement, je dois également stocker des composants quizApplication.js toute la question et les réponses,

{ 
    question: "I am task oriented in order to achieve certain goals", 
    answers: [ 
     { 
     type: "Brown,D,JP", 
     content: "Hell Ya!" 
     }, 
     { 
     type: " ", 
     content: "Nah" 
     } 
    ] 
}, 

et voici ma fonction pour définir la réponse de l'utilisateur

setUserAnswer(answer) { 
if (answer.trim()) { 
    const answer_array = answer.split(','); 
    const updatedAnswersCount = update(this.state.answersCount, { 
    [answer]: {$apply: (currentValue) => currentValue + 1}, 
    }); 
    this.setState({ 
    answersCount: updatedAnswersCount, 
    answer: answer 
    }); 
} 
} 

J'ai aussi un composant AnswerOption comme si

function AnswerOption(props) { 
return (
    <AnswerOptionLi> 
    <Input 
    checked={props.answerType === props.answer} 
    id={props.answerType} 
    value={props.answerType} 
    disabled={props.answer} 
    onChange={props.onAnswerSelected} 
    /> 
    <Label className="radioCustomLabel" htmlFor={props.answerType}> 
    {props.answerContent} 
    </Label> 
    </AnswerOptionLi> 
); 
} 

Donc ce que j'essaie de faire est que lorsque l'utilisateur clique sur HellYa! il va incrémenter "Brown" et "D" et "JP" par +1, mais en ce moment il me donne une nouvelle valeur de answersCount comme Brown, D, JP: null, alors comment dois-je réaliser cela? Merci beaucoup!

Answer 1

Vous avez divisé votre type, mais vous n'en avez pas encore utilisé.

Comme vous l'avez partager votre type, vous obtiendrez answer_array avec une longueur de 3 contenant ["Brown", "D", "JP"]

const answer_array = answer.split(','); 

Ensuite, vous mettez à jour votre état avec le nombre de réponses mis à jour. Vous effectuez le dessous

const updatedAnswersCount = update(this.state.answersCount, { 
[answer]: {$apply: (currentValue) => currentValue + 1}, 
}); 

Ici answer contient "Brown,D,JP". Puisque vous voulez mettre à jour chacun d'entre eux par +1, passez en boucle sur la valeur de division et mettez-la à jour.

let updatedAnswersCount = null; 

answer_array.forEach((key) => { 
updatedAnswersCount = update(this.state.answersCount, { 
    [answer]: {$apply: (currentValue) => currentValue + 1}, 
}); 
} 

Ici, je suppose que votre type est unique. Signification Brown/D/JP est présent uniquement pour cette réponse et pour rien d'autre. Nous supposons donc que tous auront la même valeur.