Je crée une application en utilisant react-native . J'ai 3 composants à savoir Ind.js , Buttons.js , Rain.js . Je suis obligé de sélectionner une option dans Rain et de l'enregistrer dans l'état Ind pour un traitement ultérieur. Puisque le composant Rain n'est pas directement lié à Ind mais est connecté via un itinéraire de navigation dans Buttons .
J'utilise react-navigation .
Pour ce faire, j'ai créé une fonction onSelect () dans Ind qui fait le setState et je l'ai passée à Buttons code> via les accessoires et passé à nouveau à Rain puis j'ai exécuté la fonction, le problème est que la fonction est appelée mais aucun paramètre n'est passé, c'est-à-dire console.logs null puis undefined.
J'ai essayé de console.log les paramètres qui sont passés à Ind code >.
Ind.js
export default class Rain extends Component{
constructor(props){
super(props);
this.state = {
selection: "Test"
}
this.selectOption = this.selectOption.bind(this);
}
selectOption = () => {
this.props.navigation.state.params.selectReport(this.state.selection)
}
}
Buttons.js
export default class Buttons extends Component{
constructor(props){
super(props);
}
render(){
return(
<TouchableOpacity
onPress={() => {this.props.navigation.navigate('Rain',{
selectReport: this.props.selectReport });
}}>
<Text style={styles.text}>Rain</Text>
</TouchableOpacity>
)
}
}
Rain.js
export default class Ind extends Component {
constructor(){
super();
this.state = { report: null}
}
onSelect = (newreport) => {
this.setState({
report: newreport
})
console.log("Parameter: ", newreport)
console.log("State: ", this.state.report)
}
render(){
return(
<Buttons selectReport={() => this.onSelect()}
)
}
}
Le journal de la console renvoie le premier paramètre : undefined State: null ce qui est compréhensible car on ne clique sur rien mais après avoir cliqué, cela s'affiche
Paramètre: undefined State: undefined .
Qu'est-ce qui se passe? Je suis un débutant et y a-t-il un problème lors de la liaison ou de l'envoi des accessoires?
Veuillez expliquer.
3 Réponses :
setState est une fonction asynchrone, c'est pourquoi, après le premier clic, vous obtenez null (car cela n'a pas encore changé) mais quelque part dans votre code, la valeur de newreport est erronée.
oui, c'est vrai, mais la deuxième fois, il devrait imprimer les valeurs souhaitées, non?
oui mais évidemment quelque part qui passe ne fonctionne pas, pouvez-vous mettre console.log sur chaque composant et vérifier à quel moment est cassé?
Je devrais me connecter à la console Buttons , n'est-ce pas? parce que c'est le milieu? Mais comment dois-je le faire? Dans Ind je l'ai connecté, indéfini et dans Rain j'ai enregistré l'état et la référence de la fonction également .. tout fonctionne très bien.
Vous n'avez mis aucun paramètre dans le bouton de clic . Cependant, la fonction reçoit des paramètres en tant que valeurs. Bien sûr, il pointe vers undefind.
onSelect = (newreport) => {
this.setState({
report: newreport
})
console.log("Parameter: ", newreport)
console.log("State: ", this.state.report)
return this.state.report;
}
render(){
return(
<Buttons selectReport={this.onSelect("value")}
)
Lorsque je fais cela ... et que je clique sur le bouton Opacité tactile , cela indique que this.props.navigation.state.params.selectreport n'est pas une fonction?
@random_user Il n'y a pas de valeur de résultat dans votre fonction. Veuillez saisir le résultat comme ma réponse.
J'ai fait ce que votre réponse a indiqué ... toujours l'erreur ci-dessus
Lorsque vous utilisez la fonction de flèche, vous devez appeler comme,
export default class Ind extends Component {
constructor(){
super();
this.state = { report: null}
}
onSelect = (newreport) => {
console.log("Parameter: ", newreport)
this.setState({
report: newreport
},()=> console.log("State: ", this.state.report)) //prints in callback
}
render(){
return(
<Buttons selectReport={() => this.onSelect}>
)
}
}
également setState est async donc vous devez utiliser callback dans setState pour imprimer la valeur.
Vous devez faire ceci,
<Buttons selectReport={() => this.onSelect} > //without parenthesis
Quand j'utilise cela fonctionne. Pourquoi?
lie this automatiquement.
Pourquoi est-ce si déroutant ... J'ai des difficultés avec la liaison . pouvez-vous diriger vers certaines ressources?
et qu'en est-il aussi des paramètres? qui a été mentionné dans une autre réponse?
Ce paramètre était statique dans une autre réponse. Lorsque vous passez une fonction au composant enfant et que vous attendez un paramètre de child, vous n'avez pas besoin de parenthèses et de child vous pouvez passer param.
Référez-vous à ceci quand utiliser la fonction de flèche et comment - reactjs.org/docs/faq-functions.html < / a>
Qu'en est-il des paramètres nécessaires comme indiqué par une autre réponse?
Ce paramètre n'est qu'une valeur statique, lorsque vous passez une valeur d'enfant à parent, il ne la remplacera pas et vous obtiendrez une valeur erronée dans parent.