Je suis assez nouveau pour réagir comme natif et développé une application pour moi lorsque l'erreur indéfinie est tirée.
Comme la plupart d'entre nous, j'ai choisi de voir ce que le problème pourrait être et qu'il semblait être un problème commun, mais aucune solution n'a fonctionné. J'ai essayé des fonctions arrow et .bind Mais rien ne semblait avoir travaillé. P>
import React, {Fragment} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
TouchableWithoutFeedback,
Button,
} from 'react-native';
//I'll use the other things I've imported later :-)
const App = () => {
state = {text: 'Hello World'};
return (
<View>
<Text style={styles.titleStyle}>Title Text</Text>
<TouchableWithoutFeedback
onPress={() => (this.setState({
text: 'Goodbye World',
}))}>
<View style={styles.physView}>
<Text style={styles.physTitle}>More Text</Text>
<Text style={styles.physText}>{this.state.text}</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
};
4 Réponses :
Veuillez essayer ce code:
<TouchableWithoutFeedback onPress={ () => this.setState({ text: 'Goodbye World' }) }>
Le problème est que vous appelez simplement cela.SetState (...) immédiatement lorsque le composant est rendu pour la première fois.
<TouchableWithoutFeedback
onPress={() => { this.setState({
text: 'Goodbye World',
}) }}>
Vous utilisez un composant fonctionnel avec l'état. Cela ne fonctionne pas comme ça. Les composants fonctionnels ne peuvent pas avoir Il existe deux options: p> p> setstate code> méthode.
// Use class syntax
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
text: 'Hello world!',
}
}
onPress = () => {
this.setState({text: 'Bye-bye'});
}
render() {
return (
<View>
<Text style={styles.titleStyle}>Title Text</Text>
<TouchableWithoutFeedback
onPress={this.onPress}>
<View style={styles.physView}>
<Text style={styles.physTitle}>More Text</Text>
<Text style={styles.physText}>{this.state.text}</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
}
};
// Use hooks
import {useState} from 'react'
const App = () => {
const [text, setText] = useState('Hello World');
return (
<View>
<Text style={styles.titleStyle}>Title Text</Text>
<TouchableWithoutFeedback
onPress={() => setText('Goodbye World');}>
<View style={styles.physView}>
<Text style={styles.physTitle}>More Text</Text>
<Text style={styles.physText}>{this.state.text}</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
};
Je suis passé à une syntaxe de classe qui fonctionne bien! J'utilise également la navigation réagissant qui nécessite des cours donc je suis content d'avoir cette solution si bientôt.
Vous ne pouvez pas utiliser l'état avec un composant fonctionnel. Essayez donc d'utiliser les crochets sont une nouvelle addition dans le réact de 16,8. Ils vous permettent d'utiliser des caractéristiques de l'état et d'autres réagissaires sans écrire une classe.
https://fr.reactjs.org/docs/hooks-intro.htmlled/a >