我最近将react-native
的版本从0.61.5
升级到了0.62.2
。升级后,我开始出现以下错误:
[error][tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating '_this2.props.component')
This error is located at:
in ItemWithSeparator (at VirtualizedSectionList.js:367)
in RCTView (at VirtualizedList.js:2058)
in CellRenderer (at VirtualizedList.js:851)
in RCTScrollContentView (at ScrollView.js:1063)
in RCTScrollView (at ScrollView.js:1196)
in ScrollView (at VirtualizedList.js:1280)
in VirtualizedList (at VirtualizedSectionList.js:216)
in VirtualizedSectionList (at SectionList.js:246)
in SectionList (at SwipeableSectionList.js:52)
in SwipeableSectionList (at ComponentSwipeableListWithSectionsView.js:119)
in ComponentSwipeableListWithSectionsView (at UnifiedAlarmList.js:258)
in RCTView (at UnifiedAlarmList.js:249)
in UnifiedAlarmList (created by ConnectFunction)
in ConnectFunction (at UnifiedAlarmListContainer.js:9)
in UnifiedAlarmListContainer (created by ConnectFunction)
in ConnectFunction (at AlarmListScreen.js:3136)
in RCTSafeAreaView (at SafeAreaView.js:51)
in ForwardRef(SafeAreaView) (at AlarmListScreen.js:3095)
in RCTView (at ImageBackground.js:61)
in ImageBackground (at AlarmListScreen.js:3091)
in AlarmListScreen (created by ConnectFunction)
in ConnectFunction (at ComponentWrapper.js:36)
in WrappedComponent (at ComponentWrapper.js:52)
in Provider (at ComponentWrapper.js:51)
in ReduxWrapper (at renderApplication.js:45)
in RCTView (at AppContainer.js:109)
in RCTView (at AppContainer.js:135)
in AppContainer (at renderApplication.js:39)
它来自我创建的可重复使用的SectionList
组件,该组件传递给我要渲染为项目的component
,并且抱怨它无法找到传递的{{ 1}}。因此,我怀疑component
有问题。 此代码已与this
一起使用。因此,我尝试使用0.61.5
变体而不是箭头函数,它开始起作用。但是我不明白为什么当我显式绑定与使用箭头函数时它为什么起作用。其次,bind
中发生的变化是升级后停止工作。以下是我拥有的两种代码。
这在0.62.2
中有效,但在0.61.5
中无效
0.62.2
这在0.62.2中起作用
renderItem = ({ item, index, section, separators }) => {
return <this.props.component {...item} {...this.props.otherProps} />
}
render() {
return (
<SectionList
sections={this.props.data}
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
ItemSeparatorComponent={this.renderSeparator}
style={this.props.containerStyle || {}}
keyExtractor={this.keyExtractor}
stickySectionHeadersEnabled={false}
ListHeaderComponent={this.props.renderListHeader}
/>
)
}