Utrzymuję ten błąd podczas próby uzyskania dostępu do tego. Nie ma rozwiązań, które próbowałem do tej pory

Oto mój konstruktor

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

Tutaj dzwonię do funkcji 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>
    );
  }
}

To jest miejsce, w którym próbuję uzyskać dostęp do tego.

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

Utrzymuj ten błąd

nieokreślony nie jest obiektem (oceniający "_this.state")

0
John 13 październik 2020, 19:02

1 odpowiedź

Najlepsza odpowiedź

Możesz użyć showBag i renderContent w klasie 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>
    );
  }
}
1
Top Talent 13 październik 2020, 19:29