1

我是反应世界的新手，我试图了解构建我的代码的最佳方式。

实际上，它是使用 react-native-router-flux 的 react-native，但我不相信这些对问题有任何影响。

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

/* @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 动作。通过减速器后，它将状态更改为已验证或显示锁定，然后我将重定向到下一个场景。

实际上，这一切都完美无缺。但是我收到以下警告：

警告：setState(...)：在现有状态转换期间无法更新（例如在render或其他组件的构造函数内）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至componentWillMount.

完成类似事情的推荐方法是什么？

即在商店状态更改时调用方法？

4

1 回答 1

0

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

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

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

}

render() {


    return (
        <View>

        </View>

    );
}
于 2017-01-15T02:32:44.357 回答