在React Native

时间:2017-08-29 12:21:04

标签: android ios react-native react-native-android react-native-ios

嗨我有一个屏幕,我的条件为isProductTourCompleted如果为真,那么我导航到Dashboard屏幕。我正在尝试使用componentDidMount API在AsyncStorage方法中获取它的价值。我试图在componentWillMount更新它,但没有运气。

如果是,则更新状态并重新渲染组件并导航到Dashboard。它会打开Dashboard屏幕,但会显示此警告。

我检查了几个有其他原因的线程。谁能暗示我做错了什么?

  

在React Native

中的现有状态转换(例如render内)期间无法更新
export default class FirstProductTour extends Component {
  constructor(props) {
    super(props);
    this._startDashboardScreen = this._startDashboardScreen.bind(this);

    this.state = {
      isProductTourCompleted: false
    };
  }

  componentDidMount() {
    AsyncStorage.getItem("@ProductTour:key").then(value => {
      if (value)
        this.setState({
          isProductTourCompleted: true
        });
    });
  }

  render() {
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        {this.state.isProductTourCompleted
          ? this._startDashboardScreen()
          : <View style={styles.container}>
              <Image source={require("../../img/talk_people.png")} />
              <Text style={styles.centerAlignTextStyle}>
                {strings.talk_people}
              </Text>

              <RoundButton
                robotoThinStyle={styles.roundButtonStyle}
                centerAlignTextStyle={styles.whiteColorStyle}
                onPress={() => {
                  const resetAction = NavigationActions.reset({
                    index: 0,
                    actions: [
                      NavigationActions.navigate({
                        routeName: "SecondProductTour"
                      })
                    ]
                  });
                  this.props.navigation.dispatch(resetAction);
                }}
              >
                {strings.continueText}
              </RoundButton>
            </View>}
      </View>
    );
  }

  _startDashboardScreen() {
    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName: "Dashboard"
        })
      ]
    });
    this.props.navigation.dispatch(resetAction);
  }
}

enter image description here

1 个答案:

答案 0 :(得分:3)

您需要检查是在函数上还是从单独的容器导航到FirstProductTour或DashPage。

  

在内部,React使用了几种巧妙的技术来最小化更新UI所需的昂贵DOM操作的数量   在componentDidMount中设置状态只会触发频繁的重新渲染,从而导致性能优化不佳。即使道具没有改变,组件也会重新渲染。

最佳解决方案:使用容器组件(或类似ButtonClick的功能)执行标准检查并确定导航。

另一个解决方案将检查条件并在componentwillMount上调用导航功能。类似下面的内容

componentDidMount() {
    AsyncStorage.getItem("@ProductTour:key").then(value => {
      if (value)
       this._startDashboardScreen()
    });
  }