未定義はオブジェクトではありません（_this.state）

Question

私はまだネイティブに反応することが新しく、状態がtrueに設定されている場合にのみビューをレンダリングしようとしています。しかし、私はいつも次のエラーで終わる努力を続ける限り：

Undefined is not an object (evaluating '_this.state') 

コード：

"use strict" 
import React, { Component } from 'react' 
import * as Animatable from './animations' 
import Icon from 'react-native-vector-icons/FontAwesome' 
import renderIf from './libs/renderif' 
import { Text, TouchableOpacity, View, StyleSheet, Navigator } from 'react-native' 
var MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent); 

const Ic = ({ name, style, onPress }) => (
    <TouchableOpacity onPress={onPress}> 
     <Icon name={name} style={style} /> 
    </TouchableOpacity> 
) 

const Btn = ({label, onPress}) => (
    <TouchableOpacity style={styles.btn} onPress={onPress}> 
    <Text style={styles.btnText}> 
     {label} 
    </Text> 
    </TouchableOpacity> 
) 

const Dashboard = ({ navigator }) => (
    <View style={styles.container}> 
     <Text style={styles.text}> 
      In Dashboard 
     </Text> 
     <Btn label="Let's go back" onPress={() => navigator.pop()} /> 
    </View> 
) 

const Home =() => ( // this is where I am trying to access the state 
    <View> 
     <View style={styles.navbarContainer}> 
      <View style={styles.navbar}> 
       <View style={styles.flexes}> 
        <Ic 
         name="bars" 
         style={styles.iconLeft} 
         onPress={() => this.setState({isOpen: true})} 
        /> 
       </View> 
       <View style={styles.flexes}> 
        <Text style={styles.navbarTitle}> 
         title 
        </Text> 
       </View> 
       <View style={styles.rightBtn}> 
        <Ic 
         name="envelope" 
         style={styles.iconRight} 
         onPress={() => alert("envelope pressed")} 
        /> 
       </View> 
      </View> 
     </View> 
     {renderIf(this.state.isOpen)(
      <View style={{marginTop: 40}}> 
       <Text>hi</Text> 
      </View> 
     )} 
    </View> 
) 

export default class App extends Component { 
    constructor(props){ 
     super(props) 
     this.state = { 
      isOpen: false 
     } 
    } 

    renderScene(route, navigator) { 
     return(
      <route.component 
       navigator={navigator} 
      /> 
     ) 
    } 

    render() { 
     return (
      <Navigator 
       renderScene={this.renderScene.bind(this)} 
       initialRoute={{ 
        component: Home 
       }} 
      /> 
     ) 
    } 
} 

renderIf機能：

​​

そして、メインインデックス。 android.js：

import { AppRegistry } from 'react-native' 
import App from './app'; 

AppRegistry.registerComponent('NavRoute',() => App); 

私は前に答えられた関連する質問を見つけようとしましたが、悲しいことに私が必要なものを見つけませんでした。この質問に以前に答えがあった場合は、そのスレッドと不便な点について深くお詫び申し上げます。

ありがとうございます！

Answer 1

機能/ステートレスコンポーネントで状態を使用しようとしています。それは不可能です。状態を使用するには、Reactコンポーネントのクラスバージョンを使用します。状態は、レンダー機能でthis.stateを使用するようにコンストラクターで明示的に定義する必要があります。質問して申し訳ありません

export default class Home extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     someState: '' 
    } 
    } 

    // rest of the code below 
    // move Home to a separate file - home.jsx and import it 
}