J'essaie de mapper sur un tableau d'objets et d'utiliser la clé de nom pour le passer au prop d'options dans react-select . Puis-je simplement faire cela en utilisant JS standard? J'essaie d'incorporer cet exemple .
Mes données factices
<Select
id="color"
options={this.state.schemas}
isMulti={false}
value={this.state.schemas.filter(
({ name }) => name === this.state.name
)}
getOptionLabel={({ name }) => name}
getOptionValue={({ id }) => id}
onChange={({ value }) => this.setState({ name: value })}
onBlur={this.handleBlur}
/>
Dans cDM , je mets à jour l'état avec la réponse et je la stocke dans schémas
componentDidMount() {
axios.get("/dataschemas").then(function(response) {
console.log(response.data.data);
this.setState({
schemas: response.data.data
});
console.log(this.state.schemas);
});
}
Ensuite, dans mon composant de sélection, je configure les schémas sur la prop options et mappe celle-ci dans la prop values
XXX
Je n'arrive pas à obtenir les bonnes valeurs dans les accessoires, pour afficher les noms des schémas de données dans la sélection déroulante de mon exemple codesandbox
Plus d'informations sur documents react-select relatifs à ce problème
3 Réponses :
Le prop du composant value attend un seul objet / valeur. Cependant dans le code suivant:
this.state.schemas.find(
({ name }) => name === this.state.name
)
L'appel de .filter sur un tableau renvoie un autre tableau. Vous passez donc un tableau à value , pas à un seul objet. Il vous suffit d'ajouter un [0] pour dérouler le tableau:
this.state.schemas.filter(
({ name }) => name === this.state.name
)[0]
Ou utilisez plutôt .find :
this.state.schemas.filter(
({ name }) => name === this.state.name
)
.find est en effet une meilleure option. Merci
Vous essayez d'accéder à l'état depuis la portée de la fonction de réponse. changez votre componentDidMount en ceci:
async componentDidMount() {
const response = await axios.get("/dataschemas");
if (response.data && response.data.data) {
this.setState({ schemas: response.data.data });
}
}
voici un working codesandbox
il semble que le problème soit que vous utilisiez la syntaxe de la fonction au lieu de la syntaxe de la grosse flèche et que, par conséquent, cela était lié de manière incorrecte, this.setState n'était pas défini
plus d'informations sur la différence entre la syntaxe de la fonction et de la grosse flèche ici
Comment ça marche? J'aime penser que les fonctions de grosse flèche ne le font pas ont leur propre ou ne modifient pas le contexte de «ceci». Ils la quittent seul pour qu'il reste le même que le contexte dans lequel la fonction a été créé.
Pour le débogage de futurs problèmes comme celui-ci, je recommande de commencer par regarder les erreurs de la console javascript - le conseil initial était une erreur là-bas que this.setState n'était pas défini
Cette réponse aborde un problème qui se trouvait être présent dans la boîte de dialogue, et non le problème de réaction-sélection réel sur lequel la question posait.
@GeorgeP mon interprétation de la question était que c'était le problème "Je n'arrive pas à obtenir les bonnes valeurs dans les accessoires, pour afficher les noms des schémas de données dans la liste déroulante de mon exemple de codesandbox" suite à un appel incorrect de setState, aucune valeur ne s'affichait dans la liste déroulante car this.state.schemas était [] ... basé sur console.logs il semble que c'était le problème sous-jacent sur lequel ils se posaient
plus précisément, vous utilisez la
fonctionalors que vous devriez utiliser une flècheresponse =>codesandbox.io/s/23jx8op9l0
C'est un problème, j'ai oublié de le changer pour utiliser
response =>Les documents que je lisais sur l'adaptateur simulé utilisaient ES5 au lieu d'ES6 et j'ai négligé la différence
Cela a été incorrectement marqué comme un double. Les questions "en double" mentionnées concernent un problème différent et non lié qui s'est avéré être présent dans la boîte de codes et non le problème réel sur lequel on a posé la question.
Ouais je ne sais pas comment annuler mon vote