反应流错误内部渲染方法

Question

EDIT:  我添加React.Element<*>作为返回类型，并返回<View />而不是null，但仍然存在相同的错误。

我的流量版本是0.53.1

render() {
   return (
     <View style={{ flex: 1 }} >
       <TabHeader title={strings.tabBarLabelRecommend} />
       {this._renderVideoCategory()}
     </View>
   );
}

上面是我的渲染方法，_renderVideoCategory是：

_renderVideoCategory = (): React.Element<*> => {
  if (!this.props.recommendVideos.length) {
    return <View />;
  }
   this.tabWidth = C.SCREEN_WIDTH / this.props.recommendVideos.count;
   return (
     <TabViewAnimated style={{ flex: 1 }} 
       navigationState={this.state} 
       renderScene={this._renderScene}
       renderHeader={this._renderHeader}
       renderPager={this._renderPager}
       onRequestChangeTab={this._handleChangeTab}
     />
   );
};

但是流程显示错误:(第150行是{this._renderVideoCategory()}）

Error:(150, 10) Flow: exact type: object type. This type is incompatible with union: undefined | null | boolean | number | string | type application of type React$Element | type application of identifier Iterable

Answer 1

尝试返回一个空视图，因为Flow希望你返回一个React.Element（也在示例代码中注释）：

_renderVideoCategory = ():React.Element<*> => {
  if (!this.props.recommendVideos.length) {
    return <View />;
  }

  this.tabWidth = C.SCREEN_WIDTH / this.props.recommendVideos.count;

  return (
  <TabViewAnimated
    style={{ flex: 1 }}
    navigationState={this.state}
    renderScene={this._renderScene}
    renderHeader={this._renderHeader}
    renderPager={this._renderPager}
    onRequestChangeTab={this._handleChangeTab}
  />);
}

Answer 2

而不是返回 null 返回空div

if (this.props.recommendVideos.length === 0) {
    return <View/>;
}

修改

您是否可以更改声明该功能的方式

_renderVideoCategory (): React.Element<*>{
    if (this.props.recommendVideos.length === 0) {
        return <View/>;
    }
    this.tabWidth = C.SCREEN_WIDTH / this.props.recommendVideos.count;
    return (
        <TabViewAnimated
              style={{ flex: 1 }}
              navigationState={this.state}
              renderScene={this._renderScene}
              renderHeader={this._renderHeader}
              renderPager={this._renderPager}
              onRequestChangeTab={this._handleChangeTab}
        />
    );
}