在React Native

Question

嗨我有一个屏幕，我的条件为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);
  }
}

Answer 1

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

  

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

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

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

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