Блог

Главная - Вопросы по программированию - неопределенный не является объектом (вычисление ‘_this.state’)

неопределенный не является объектом (вычисление ‘_this.state’)

#javascript #reactjs #react-native

#javascript #reactjs #реагировать -родной

Вопрос:

Я продолжаю получать эту ошибку при попытке получить доступ к this.state Ни одно из решений, которые я пробовал до сих пор, не работало

Вот мой конструктор

 export default class Layout extends React.Component {
    constructor() {
        super();
        this.state = {
            bagTitle: 'View Bag'
        }
        this.renderContent = this.renderContent.bind(this);
    }

    render() {
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name='Menu' component={HomeScreen}
                        options={{
                            headerRight: () => (
                                <Ionicons style={iconView.icons} name='ios-list' size={26} color="black" />
                            ),
                        }}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        );
    };
}

Здесь я вызываю функцию renderContent

 class HomeScreen extends React.Component {
  render() {
    const title = 'View Bag'
    return (
      <View style={styles.container}>
        <StatusBar style="auto" />
        {/* Bottomsheet View */}

        <BottomSheet
          ref={sheetRef}
          snapPoints={[100, 300, Dimensions.get('window').height - 100]}
          borderRadius={10}
          renderContent={renderContent}
        >
          <Text onPress={showBag} style={{ backgroundColor: 'red', fontSize: 17, fontWeight: '600', textAlign: 'center', position: "absolute", marginTop: 20, width: windowWidth }}>View Bag</Text>
        </BottomSheet>
      </View>
    );
  }
}

Здесь я пытаюсь получить доступ к this.state

 renderContent = () => (
    <View
      style={{
        backgroundColor: '#ecf0f1',
        padding: 16,
        fontSize: 20,
        height: windowHeight,
        width: windowWidth,
        marginBottom: -200
      }}
    >
      <Text onPress={showBag} style={{ fontSize: 17, fontWeight: '600', textAlign: 'center', position: "absolute", marginTop: 20, width: windowWidth }}>{this.state.bagTitle}</Text>
    </View>
);

Продолжайте получать эту ошибку

неопределенный не является объектом (вычисление ‘_this.state’)

Комментарии:

1. @TopTalent вы случайно не знаете, в чем может быть проблема?

2. Вы использовали renderContent={this.renderContent} в HomeScreen классе? Или this.props.renderContent ?

3. Когда я их использую, нижняя таблица не отображается

4. Не могли бы вы поделиться своим репозиторием проекта? Или создать codesandbox.io ? Позвольте мне взглянуть.

5. Конечно, вот репозиторий: github.com/Jkurbs/web

Ответ №1:

Вы можете использовать showBag и renderContent в HomeScreen классе

 class HomeScreen extends React.Component {
  constructor() {
    super();
    this.state = {
      bagTitle: 'View Bag'
    }
    this.showBag = this.showBag.bind(this);
    this.renderContent = this.renderContent.bind(this);
  }

  // FUNCTIONS
  showBag = (item) => {
    sheetRef.current.snapTo(1);
    if (item.title !== null) {
      this.setState({
        bagTitle: item.title
      })
      console.log('ITEM: ', item);
    }
  }

  renderContent = () => (
    <View
      style={{
        backgroundColor: '#ecf0f1',
        padding: 16,
        fontSize: 20,
        height: windowHeight,
        width: windowWidth,
        marginBottom: -200
      }}
    >
      <Text onPress={this.showBag} style={{ fontSize: 17, fontWeight: '600', textAlign: 'center', position: "absolute", marginTop: 20, width: windowWidth }}>{this.state.bagTitle}</Text>
    </View>
  );

  render() {
    const title = 'View Bag'
    return (
      <View style={styles.container}>
        <StatusBar style="auto" />
        {/* Bottomsheet View */}

        <BottomSheet
          ref={sheetRef}
          snapPoints={[100, 300, Dimensions.get('window').height - 100]}
          borderRadius={10}
          renderContent={this.renderContent}
        />
      </View>
    );
  }
}