React native不会在文本中显示{this.state.age}

问题描述：

React native不会在或中显示我的任何状态。但他们正在使用功能。React native不会在文本中显示{this.state.age}

这是我的代码：

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出错如果有人能帮我解决问题，那将会非常好。我更新了所有渲染代码

可以显示完整的代码 – grgmo

显示你试过代码 – Balasubramanian

yapz ..也许，你必须表现出充分的代码。所以我们知道你的问题.. – muhammadaa

答

在构造函数中，请一次完成所有初始化。每个this.state = {}语句都覆盖以前的this.state

用以下代码替换您的构造函数。

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

我有这个，它仍然没有工作，我没有得到一个错误或什么，它只是显示空白。 –

这里最好共享整个组件代码以便理解。 –

我已经对我以前的答案进行了编辑，尝试一下。 –

答

继承人的示例代码试试这个..

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

答

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

改变这一点：

render() { 
*not important* 
}

到：

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

答

此刻，你正在不断重写你的状态，我在下面收拾你的代码了一下，在这里有些要注意的是我所做的...

您需要从'react'中导入React才能使用'Component'，因为您的课程需要从此延伸。
您需要使用一个类，你有状态
您可以导入图像就像我与fbImage
这是好习惯说的是在你做的每个组件的出口默认以下步骤进行。
你不需要调用构造函数和超强，只是简单地做状态= {}会为你做这个
将所有的状态一个状态对象中，不要让回忆状态

想想您的通用代码格式（根据其外观）更易于阅读的代码将帮助您更轻松地识别错误！

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

    } 

}

React native不会在文本中显示{this.state.age}

相关推荐