2017-02-16 9 views
1

私のビューのレンダリング機能では、ビューの不透明度を状態プロパティ:this.state.infoOpacityに結びつけようとしています。レンダリング関数で状態プロパティが定義されていません

これはエラーを回している「未定義のは( 『this.state.infoOpacity』を評価)オブジェクトではありません」

どれガイダンスが参考になります。

export default class BookView extends Component 
{ 
    constructor(props) { 
    super(props); 
    this.state = { 
     hideInfo:false, 
     infoOpacity:0.80, 
     swiperWidth:Dimensions.get('window').width, 
     swiperHeight:Dimensions.get('window').height 
    }; 
    } 

    render() { 
    pages.forEach(function(ranPage){ 
     photoViews.push(
     <View key={ranPage.letter} style={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}}> 
      <View style={[styles.meow,{opacity: this.state.infoOpacity}]}> 
       <Text style={styles.text}>{ranPage.name}</Text> 
       <Text style={styles.text}>{ranPage.phonetic}</Text> 
       <Text style={styles.text2}>{ranPage.description}</Text> 
      </View> 
     </View> 
    ) 
    }); 


    return (
     <View style={{flex:1}}> 
     <Swiper showsButtons={false} style={{backgroundColor:'#000'}} width={this.state.swiperWidth} height={this.state.swiperHeight}> 
      {photoViews} 
     </Swiper> 
     </View> 
    ); 
    } 
} 

答えて

2

forEach機能でコンテキストが変更されました。矢印機能を使用して問題を解決してください。だから、代わりに

まさにそれだったpages.forEach(function(ranPage){ ... });

書き込みこの

pages.forEach((ranPage) => { ... });

+0

!ありがとうございました!あなたは私がすることができる私はこのミスをもう一度しないで、ネイティブの文脈に反応するための良い読書を知っていますか? –

+1

実際には反応ネイティブ自体とは関係ありませんが、javascriptを使用してください。常に矢印機能を使用してください。これはほとんどの場合正しい選択です:) –

+1

あなたの文脈を失わないように悪名高い 'bind'関数を使うこともできます。あなたの 'forEach'関数は' pages.forEach(function(ranPage){photoViews.push(.. JSX here ...)}。bind(this)); 'のように見えるはずです。より良い解決策です。 – milkersarac

関連する問題