J'ai essayé de console.log la valeur de l'entrée de texte, mais je reçois l'erreur "Undefined n'est pas un objet (évaluant 'this.state.inputvalue')". Quel est le problème? Merci!
4 Réponses :
Vous n'avez pas défini la valeur de la propriété d'état. Fournir une valeur à l'installation. cette.SetState ({propriété: valeur})
Vous pouvez utiliser cette syntaxe si la variable a le même nom que la propriété, voir ICI sur 'Nouvelles notations dans ECMAScript 2015'
Le problème est dans la façon dont vous l'avez implémenté. Veuillez essayer comme ci-dessous ...
class SearchScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
};
}
search() {
console.log(this.state.inputValue);
}
render() {
return (
<View>
<TextInput
onChangeText={(inputValue) => {
this.setState({ inputValue });
this.search();
}}
value={this.state.inputValue}
/>
</View>
);
}
}
export default SearchScreen;
Merci, ça marche. Une dernière question: Si j'écris dans l'entrée "Hello", la console récupère "l'enfer" (le dernier mot est toujours manquant à moins que je tape quelque chose d'autre ou cliquez sur la barre d'espace). Est-ce que tu sais pourquoi?
@Unaidu Oui, c'est parce que ceci.Search () donne le résultat avant la mise à jour de la valeur de l'état. Il faut un peu de temps pour mettre à jour l'état. (Microsecondes) Mais, la fonction de recherche est exécutée avant la mise à jour de l'état. Donc, vous voyez toujours jusqu'à un avant la dernière lettre de votre console. Mais, vous n'avez pas besoin de vous inquiéter. La valeur de l'état est déjà mise à jour.
Le problème est la suivante:
(inputValue) => {
this.setState({ inputValue })
this.search()
}
Ce problème s'est produit parce que deux choses.
Premier: p>
Le ce fichier.Setate est une fonction ASYNC. P>
Si vous passez une fonction après que le SSTATE fonctionne comme une .then () dans une promesse. p>
secondaire: p>
Si vous passez une fonction après l'autre les séparant par ', la fonction la plus à droite sera exécutée d'abord P> Vous pouvez résoudre ce problème comme ça: p> ou vous pouvez essayer quelque chose comme ça: P> class SearchScreen extends React.Component {
state = {
inputValue: "",
};
search = () {
console.log(this.state.inputValue);
}
setSearch = inputValue => {
// The function 'search' will be execute after the state was set
this.setState(
{ inputValue },
() => this.search()
);
}
render() {
return (
<View>
<TextInput
onChangeText={ inputValue => this.setSearch(inputValue) }
value={this.state.inputValue}
/>
</View>
);
}
}
export default SearchScreen;