React native不會在文本中顯示{this.state.age}

Question

React native不會在或中顯示我的任何狀態。但他們正在使用功能。

這是我的代碼：

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

我的構造函數：

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: '' 
    } 
} 

要顯示國家：

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> 
    ); 
    }} 

但其深藏不露:( 我也不要」 t出錯 如果有人能幫我解決問題，那將會非常好。 我更新了所有渲染代碼

Answer 1

在構造函數中，請一次完成所有初始化。每個this.state = {}語句都覆蓋以前的this.state

用以下代碼替換您的構造函數。

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

Answer 2

繼承人的示例代碼試試這個..

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

渲染方法不返回任何東西。 Add return inside render方法。

改變這一點：

render() { 
*not important* 
} 

到：

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

Answer 4

此刻，你正在不斷重寫你的狀態，我在下面收拾你的代碼了一下，在這裏有些要注意的是我所做的...

1. 您需要從'react'中導入React才能使用'Component'，因爲您的課程需要從此延伸。
2. 您需要使用一個類，你有狀態
3. 您可以導入圖像就像我與fbImage
4. 這是好習慣說的是在你做的每個組件的出口默認以下步驟進行。
5. 你不需要調用構造函數和超強，只是簡單地做狀態= {}會爲你做這個
6. 將所有的狀態一個狀態對象中，不要讓回憶狀態

7. 想想您的通用代碼格式（根據其外觀）更易於閱讀的代碼將幫助您更輕鬆地識別錯誤！

   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> 
       ) 
   
       } 
   
   }