Блог

Я все еще новичок в react native и пытаюсь отобразить представление, только если для состояния установлено значение 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:

 'use strict';
import React, { Component } from 'react';
const isFunction = input => typeof input === 'function';
export default predicate => elemOrThunk =>
  predicate ? (isFunction(elemOrThunk) ? elemOrThunk() : elemOrThunk) : null;
  

И основной index.android.js:

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

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

Я попытался найти соответствующий вопрос, на который был дан ответ ранее, но, к сожалению, я не нашел тот, который мне нужен. Если на этот вопрос был дан ответ ранее, пожалуйста, укажите мне на эту тему и примите мои глубочайшие извинения за доставленные неудобства.

Заранее благодарю вас!

Вы пытаетесь использовать состояние в функциональном компоненте / компоненте без состояния. Это невозможно. Чтобы использовать состояние, используйте версию класса компонента 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
}