Question

我使用Redux使用React创建了一个组件，在将状态映射到props之前需要两次渲染。

使用此代码，

首次渲染时的'user.private'为空，而在第二次渲染时，它是假的

因此，在显示隐藏内容

之前，加载页面在显示“登录”之间闪烁一秒

我想默认显示登录文字，但如果用户的私有字段设置为false，我实际上并不希望它显示。

class Content extends React.Component {
    render() {
        const { user } = this.props;

        let show = false;

        if (user.private === false) show = true

        return (
            <section>
            {
                show
                ? <p>hidden content</p>  
                : <p>login</p>
            }
            </section>  
        )
    }
}

const mapStateToProps = state => ({
  user: state.store.user
});

export default connect(mapStateToProps, {})(Content)

Answer 1

假设user最初未定义或为空，您可以在显示任何内容之前检查user和/或其属性private是否已定义：

if (this.props.user == null || this.props.user.private) {
  show = false;
}

如果double equals null的值未定义或为null，true将生成条件this.props.user。您也可以使用!this.props.user。

如果您在获得user之前将{0}的初始值设为{}，那么您必须这样做：

if (this.props.user.private == null || this.props.user.private) {
  show = false;
}

Answer 2

您可以使用switch来处理null case（您可以显示加载器，也可以通过返回null来渲染任何内容）我使用组件状态来说明这个想法，但您可以将它应用于您的redux连接组件

        // Beginning of function - line below contains the options for the 
        // toaster method:
        // Invoke via - onclick(e, {text: 'This is an alert with a TIMER', 
        // timer:true, speed: 3500, color: 'dark'})

        toaster: function(e, params = {}) {

            // Set defaults for params.object options
            var setDefaults = function () {
                if (e == null) {
                    e = this.event;
                };
                if (params.speed == null) {
                    params.speed = 3500;
                };
                if (params.timer == null) {
                    params.timer = false;
                };
                if (params.color == null) {
                    params.color = 'light';
                };
                if (params.text == null) {
                    params.text = 'This is a default warning'
                };
            }();

          //Apply timer function
          timerOn(params.speed); // params.speed = 4500
          var timing; // Variable set outside of the timerOn() function

          function timerOn () {

                if (params.timer) {
                    timing = setTimeout(function(){
                        el[0].classList.remove('show-toaster');
                        console.log('happening');
                    }, params.speed);  
                } else {
                    clearTimeout(timing);
                    console.log('just cleared timing variable');
                } 

            } // timerOn ends

demo

Answer 3

您可以将三元运算符调整为嵌套运算符

 class Content extends React.Component {
    render() {
        const { user } = this.props;

        return (
            <section>
            {
                user.private === null
                ? null or <p>loading</p>
                : user.private === true
                    ? <p>show content</p> 
                    : <p>hide content</p>
            }
            </section>  
        )
    }
}

在道具正确映射/设置之前反映渲染内容

3 个答案: