undefined 不是一个对象（评估'_this.state'）

Question

尝试访问 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>

);

继续收到此错误

undefined 不是一个对象（评估'_this.state'）

Answer 1

您可以在课堂上使用showBag和renderContentHomeScreenclass HomeScreen extends React.Component {&nbsp; constructor() {&nbsp; &nbsp; super();&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; bagTitle: 'View Bag'&nbsp; &nbsp; }&nbsp; &nbsp; this.showBag = this.showBag.bind(this);&nbsp; &nbsp; this.renderContent = this.renderContent.bind(this);&nbsp; }&nbsp; // FUNCTIONS&nbsp; showBag = (item) => {&nbsp; &nbsp; sheetRef.current.snapTo(1);&nbsp; &nbsp; if (item.title !== null) {&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; bagTitle: item.title&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; console.log('ITEM: ', item);&nbsp; &nbsp; }&nbsp; }&nbsp; renderContent = () => (&nbsp; &nbsp; <View&nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: '#ecf0f1',&nbsp; &nbsp; &nbsp; &nbsp; padding: 16,&nbsp; &nbsp; &nbsp; &nbsp; fontSize: 20,&nbsp; &nbsp; &nbsp; &nbsp; height: windowHeight,&nbsp; &nbsp; &nbsp; &nbsp; width: windowWidth,&nbsp; &nbsp; &nbsp; &nbsp; marginBottom: -200&nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; <Text onPress={this.showBag} style={{ fontSize: 17, fontWeight: '600', textAlign: 'center', position: "absolute", marginTop: 20, width: windowWidth }}>{this.state.bagTitle}</Text>&nbsp; &nbsp; </View>&nbsp; );&nbsp; render() {&nbsp; &nbsp; const title = 'View Bag'&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; <StatusBar style="auto" />&nbsp; &nbsp; &nbsp; &nbsp; {/* Bottomsheet View */}&nbsp; &nbsp; &nbsp; &nbsp; <BottomSheet&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={sheetRef}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; snapPoints={[100, 300, Dimensions.get('window').height - 100]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderRadius={10}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderContent={this.renderContent}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; );&nbsp; }}