Question

我是全新的反应世界，我正在努力理解构建我的代码的最佳方式。

实际上，它是使用react-native-router-flux的反应本机，但我不相信这些会对这个问题产生任何影响。

我尝试设置这样的启动画面：

/* @flow */
'use strict';

import { connect } from 'react-redux';

import React, { Component } from 'react';

import { View, Text, Image } from 'react-native';

import { init } from "../core/auth/actions"

import { Actions } from 'react-native-router-flux';

const mapStateToProps = (state) => {
    return {
        isAuthenticated: state.authState.authenticated,
        showLock: state.authState.showLock
    }
}

class Splash extends Component {

    constructor(props) {
        super(props)
    }

    componentWillMount() {
        const {dispatch} = this.props;
        dispatch(init());
    }

    navigateToHome(){
        Actions.home();
    }

    navigateToLogin(){
        Actions.login();
    }

    render() {

        const { isAuthenticated, showLock } = this.props

        return (
            <View>
                {isAuthenticated &&
                    this.navigateToHome()
                }
                {showLock && this.navigateToLogin()}
            </View>

        );
    }

}

const connectedSplash = connect(mapStateToProps)(Splash)

export default connectedSplash;

当应用程序启动时，将渲染此场景，并调度init操作。通过reducer后，它将状态更改为authenticated或showlock，然后我重定向到下一个场景。

这一切都完美无缺。但是我收到了以下警告：

警告：setState（...）：在现有状态期间无法更新转换（例如在render或其他组件内构造函数）。渲染方法应该是道具的纯函数州;构造函数的副作用是反模式，但可以移动到componentWillMount。

什么是推荐的类似方法？

在存储状态更改时调用方法？

Answer 1

不确定我是否有最好的方法，但这种方法对我来说似乎已经更好了：

    componentDidUpdate(){
    const { isAuthenticated, showLock } = this.props
    if (isAuthenticated){
        return this.navigateToHome();
    }

    if (showLock){
        this.navigateToLogin();
    }

}

render() {


    return (
        <View>

        </View>

    );
}

React和Redux架构审核

1 个答案: