React native ne montre pas {} this.state.age dans le texte

Question

React natif n'affichera pas ou de mes Etats. Mais ils travaillent avec des fonctions.

C'est dans mon code:

import { 
    StyleSheet, 
    View, 
    Image, 
    Text, //Important 
    PanResponder, 
    Animated, 
    Dimensions, 
    Button, 
    Slider, 
    TouchableWithoutFeedback, 
    Alert, 
    TouchableOpacity, 
    TouchableHighlight, 
    Modal, // Important  
} from 'react-native' 

Mon Constructor:

constructor(props) { 
    super(props); 
    this.state = {ModalMenu: false}; 
    this.state = {ModalKunst: false}; 
    this.state = {ModalArtwork: false}; 
    this.state = { viewRef: null }; 
    this.state = { age: 150 }; 
    this.state = { farbe: 'black'}; 
    this.state = {ModalPrice: false}; 

    this.state = { 
     TextInputName: '', 
     TextInputEmail: '', 
    } 
    this.state = { 
     TextInputName2: '', 
     TextInputEmail2: '' 
    } 
} 

Pour afficher l'état:

render() { 
    const {birthday, name, bio, id, id2} = this.props.profile 
    const profileAge = this.calcAge(birthday) 
    var fbImage = require('./img/bild12.jpg') 

    const rotateCard = this.pan.x.interpolate({ 
     inputRange: [-200, 0, 200], 
     outputRange: ['10deg', '0deg', '-10deg'], 
    }) 
    const animatedStyle = { 
     transform: [ 
     {translateX: this.pan.x}, 
     {translateY: this.pan.y}, 
     {rotate: rotateCard}, 
     ] 
    }  
    return ( 
     <View><Text>{this.state.age}</Text></View> 
    ); 
    }} 

Mais sa ne montrant rien :( Je ne aussi » t obtenir une erreur Serait très bien si quelqu'un pouvait m'aider avec ça. Je mis à jour tout le code rendu

Answer 1

Dans le constructeur s'il vous plaît faire tout votre initialisation à la fois. Chaque déclaration this.state = {} est Outrepasser la this.state précédente

votre constructeur avec remplacer le code ci-dessous.

this.state = { 
    ModalMenu: false, 
    ModalKunst: false, 
    viewRef: null, 
    age: 150, 
    farbe: 'black', 
    ModalPrice: false 
}; 

Answer 2

Heres un exemple de code essayer ce ..

import React, { Component } from 'react'; 
import { Text, View, StyleSheet } from 'react-native'; 

export default class App extends Component { 
    constructor(){ 
     super(); 
     this.state = {age: '25'}; 
    } 
    render() { 
    return (
     <View > 
     <Text style={styles.paragraph}> 
      {this.state.age} 
     </Text> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    paragraph: { 
    margin: 44, 
    fontSize: 20, 
    fontWeight: 'bold', 
    textAlign: 'center', 
    color: '#34495e', 
    }, 
}); 

Answer 3

Votre méthode render ne retourne rien. Ajouter une méthode retour intérieur rendre.

changement ceci:

render() { 
*not important* 
} 

à:

render() { 
    return (
    <View><Text>{this.state.age}</Text></View> 
); 
} 

Answer 4

En ce moment, vous remplacez sans cesse votre état, j'ai rangé votre code un peu plus loin, ici quelques points à noter à propos de ce que je l'ai fait ...

1. Vous devez importer React de 'react' pour utiliser 'Component' car votre classe doit s'étendre à partir de cela.
2. Vous devez utiliser une classe que vous avez l'état
3. Vous pouvez importer une image comme je l'ai fait ci-dessous avec fbImage
4. Il est bon d'avoir l'habitude dire quel est votre défaut exporté dans chaque composant que vous faites.
5. Vous n'avez pas besoin d'appeler le constructeur et super, tout simplement faire état = {} fera pour vous
6. Placez tous votre état dans l'objet d'état, ne gardez pas de rappeler l'état

7. Pensez à votre code général de formatage (en termes de quoi il ressemble) plus facile à lire le code vous aidera à identifier les erreurs plus facilement!

   import React from 'react' 
   import { 
       StyleSheet, 
       View, 
       Image, 
       Text, //Important 
       PanResponder, 
       Animated, 
       Dimensions, 
       Button, 
       Slider, 
       TouchableWithoutFeedback, 
       Alert, 
       TouchableOpacity, 
       TouchableHighlight, 
       Modal, // Important  
   } from 'react-native' 
   
   import fbImage from './img/bild12.jpg' 
   
   export default class App extends React.Component { 
       state = { 
       age: 150, 
       farbe: 'black', 
       ModalArtwork: false, 
       ModalKunst: false, 
       ModalMenu: false, 
       ModalPrice: false, 
       TextInputName: '', 
       TextInputEmail: '', 
       TextInputName2: '', 
       TextInputEmail2: '', 
       viewRef: null, 
   } 
   
       render() { 
   
        const {birthday, name, bio, id, id2} = this.props.profile 
        const profileAge = this.calcAge(birthday) 
   
        const rotateCard = this.pan.x.interpolate(
         { 
          inputRange: [-200, 0, 200], 
          outputRange: ['10deg', '0deg', '-10deg'], 
         } 
        ) 
   
        const animatedStyle = { 
         transform: [ 
          {translateX: this.pan.x}, 
          {translateY: this.pan.y}, 
          {rotate: rotateCard}, 
         ] 
        } 
   
       return ( 
        <View> 
         <Text> 
          {this.state.age} 
         </Text> 
        </View> 
       ) 
   
       } 
   
   }