从0.61.5升级到0.62.2后的怪异反应本机绑定错误

时间:2020-06-28 20:41:54

标签: javascript reactjs react-native

我最近将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}
      />
    )
  }

0 个答案:

没有答案