Je mappe sur un tableau de 20 chaînes dans un composant React. Le tableau a été transmis à ce composant en tant qu'accessoires d'un parent. Lorsque je passe le résultat de la fonction à un élément JSX (un h1), il ne renvoie que le nom. Lorsque je passe la même fonction à l'espace réservé d'un formulaire, il renvoie le nom suivi de 20 virgules. Si je change l'ID afin que la fonction de carte renvoie une chaîne différente du milieu du tableau, elle renvoie le nom avec 10 virgules de chaque côté. Le dernier élément du tableau est renvoyé avec 20 virgules avant le nom.
J'ai essayé de faire renvoyer la fonction null ou une chaîne vide ou simplement de ne pas avoir de «autre».
Voici le function:
<input
type="text"
className="form-control"
placeholder={this.getTeacherName()}
disabled
/>
Voici où je l'utilise et j'obtiens la réponse souhaitée:
return (
<h1>{this.getTeacherName()}'s Schedule</h1>
)
Voici où je je l'utilise et je reçois le problème:
getTeacherName = () => {
return this.props.teachers.map(teacher => {
if (teacher.id == this.props.match.params.id) {
return teacher.name;
} else {
return null;
}
});
};
Voici une capture d'écran de ce que je vois.
Merci !
3 Réponses :
Votre méthode getTeacherName () doit sélectionner le bon enseignant, puis renvoyer le nom comme suit.
getTeacherName = () => {
let teacherObj = this.props.teachers.find(teacher => (teacher.id == this.props.match.params.id));
return teacherObj ? teacherObj.name : null;
};
La map () crée un nouveau tableau avec les résultats de l'appel d'un fonction fournie sur chaque élément du tableau appelant.
Dans votre cas, vous devriez donc utiliser find (predicate) pour trouver l'enseignant, puis obtenir son nom s'il est trouvé.
Vous pouvez utiliser le filtre comme ci-dessous
getTeacherName = () => {
let teacher = this.props.teachers.filter(teacher => teacher.id == this.props.match.params.id )[0];
return teacher ? teacher.name : null
};
Si vous recherchez le nom d'un seul enseignant, vous ne devez pas utiliser de tableau. Vous êtes soumis au rendu de tableau par défaut qui peut être différent dans différents scénarios.