如果在数据准备好显示之前，即使活动指示符也打开了选项卡，则带有redux的react-native-tab-view崩溃

问题描述

我有redux + API，该API从服务器获取数据，然后将其从redux转换为react-native-tab-view的状态对象：

//types 

import { NavigationState } from 'react-native-tab-view';

export enum STANDINGS_TAB {
  CHANGE_INDEX = 'STANDINGS_TAB_CHANGE_INDEX',}

export type StandingsRoute = {
  key: string;
  title: string;
  league: EsportLeague;
};

export type Standingsstate = NavigationState<StandingsRoute>;

interface changeStandingsTabViewIndex {
  type: typeof STANDINGS_TAB.CHANGE_INDEX;
  index: number;
}
...

在我的标签页屏幕中，我显示了一个带有活动指示器的屏幕，该模块在加载数据并准备呈现给标签页视图之前显示

：

//types 

class StandingsTabView extends React.Component<
  StandingsTabProps,Standingsstate
> {
  _renderTabBar = (...);

  _renderLabel = (...);

  getSceneMap = () => {
    let sceneMap = {};

    this.props.standingsstate.routes.map((route,index) => {
      sceneMap[route.league.tournaments[0].league.name] = () => {
        return <LeagueTabScreen tournament={route.league.tournaments[0]} />; // some component for tab scene
      };
    });

    return sceneMap;
  };

  _renderScene = SceneMap(this.getSceneMap());

  render() {
    if (this.props.standingsstate.routes.length == 0 && this.props.pending)
      return (
        <View
          style={{
            flex: 1,backgroundColor: '#07232B',alignContent: 'center',justifyContent: 'center',}}
        >
          <ActivityIndicator
            size="large"
            color={'#6AFCFA'}
            style={{ padding: 5 }}
          />
        </View>
      );
    return (
      <TabView
        navigationState={this.props.standingsstate}
        renderScene={this._renderScene}
        renderTabBar={this._renderTabBar}
        onIndexChange={this.props.changeStandingsTabIndex}
        initialLayout={{ width: Dimensions.get('window').width }}
      />
    );
  }
}

const mapStatetoProps = (state: RootState) => ({
  pending: state.standingsPending.pending,standingsstate: state.standingsstate,error: state.standingsError.error,});

export default connect(mapStatetoProps,{ changeStandingsTabIndex })(
  StandingsTabView
);

但是在加载结束并在redux中准备好之后，我得到了这个错误：

但是，如果我等待一段时间并且在打开屏幕之前加载了所有数据，那么就没有活动指示器和数据，并且一切看起来都很好，完全符合我的要求。 有人告诉我将类组件更改为功能组件，但我从未使用过功能组件。然后，我将代码更改为此：

const StandingsTabView = () => {
  const dispatch = usedispatch();
  const { pending,standingsstate,error } = useSelector(
    (state: RootState) => ({
      pending: state.standingsPending.pending,}),shallowEqual
  );

  const changeIndex = useCallback(
    (index: number) => dispatch(changeStandingsTabIndex(index)),[dispatch]
  );

  const renderTabBar = ...

  const renderLabel = ...

  const getSceneMap = () => {
    let sceneMap = {};

    standingsstate.routes.map((route,index) => {
      sceneMap[route.league.tournaments[0].league.name] = () => {
        return <LeagueTabScreen tournament={route.league.tournaments[0]} />; // some component for tab scene
      };
    });

    return sceneMap;
  };

  const renderScene = SceneMap(getSceneMap());

  if (standingsstate.routes.length == 0 && pending)
    return (
      <View
        style={{
          flex: 1,}}
      >
        <ActivityIndicator
          size="large"
          color={'#6AFCFA'}
          style={{ padding: 5 }}
        />
      </View>
    );

  return (
    <TabView
      navigationState={standingsstate}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={changeIndex}
      initialLayout={{ width: Dimensions.get('window').width }}
    />
  );
};

export default StandingsTabView;

现在，即使数据还没有准备好，所有的加载都很好，我改为显示活动指示器。但是，标签现在太懒了，无法点击它们。就像x 10慢一点的动画，我什至都看不到场景是如何变化的。

延迟示例：https://streamable.com/g9inf0

有人可以向我解释为什么我通过从类更改为功能组件而摆脱了这个错误，但是现在一切都如此缓慢，以及如何解决它？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）