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和renderContentHomeScreen

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>

    );

  }

}