Javascript undefined不是对象（正在评估此.state'；）

尝试访问此.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>
        );
    };
}

导出默认类布局扩展React.Component{
构造函数（）{
超级（）；
此.state={
bagTitle:“查看包”
}
this.renderContent=this.renderContent.bind（this）；
}
render（）{
返回(
(
),
}}
/>
);
};
}

这就是我调用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>
    );
  }
}

类主屏幕扩展React.Component{
render（）{
const title='查看包'
返回(
{/*底板视图*/}
查看包
);
}
}

这是我试图访问此文件的地方。状态

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

renderContent=（）=>(
{this.state.bagTitle}
);

继续获取此错误

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

undefined不是对象（正在计算“\u this.state”）

---

您可以在

主屏幕

类中使用

showBag

和

renderContent

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

类主屏幕扩展React.Component{
构造函数（）{
超级（）；
此.state={
bagTitle:“查看包”
}
this.showBag=this.showBag.bind（this）；
this.renderContent=this.renderContent.bind（this）；
}
//功能
展示袋=（项目）=>{
sheetRef.current.snapTo（1）；
如果（item.title！==null）{
这是我的国家({
bagTitle:item.title
})
console.log（'ITEM:'，ITEM）；
}
}
renderContent=（）=>(
{this.state.bagTitle}
);
render（）{
const title='查看包'
返回(
{/*底板视图*/}
);
}
}

在哪里定义了

renderContent

函数

Layout

class或

Other

？@TopTalent谢谢，刚刚编辑了我的问题，不客气。@TopTalent你知道可能是什么问题吗？你是否在

主屏幕中使用了
renderContent={this.renderContent}
？或者
此.props.renderContent
？