Question

我正在第一次尝试在客户端和服务器上进行渲染，然后点击了我的第一个障碍。我有一个登录/退出元素我需要有条件地显示（显然，取决于用户是否登录）。这是我之前成功使用的一种技术，但现在我正专注于服务器渲染，我收到了这个错误。

有什么建议吗？

P.S。 - 尽管我不确定如何解决这个问题，但我不得不说React团队在彻底的错误/警告消息传递方面做了如此出色的工作。 BRAVO！

JS：

import React from 'react';
import styles from './Header.scss';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
import Navigation from '../Navigation';

import firebaseUtils from '../../utils/firebaseUtils';

@withStyles(styles)
class Header extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loggedIn: firebaseUtils.isLoggedIn()
        };
    }

    render() {
        return (
            <header className="Header">
                <div className="Header__container">
                    <hgroup className="Header__hgroup">
                        <h1 className="Header__h1">And Scene</h1>
                        <h2 className="Header__h2">Watch movies together, apart.</h2>
                    </hgroup>
                    <nav className="Header__nav">
                        {(() => {
                            if (this.state.loggedIn)
                                return <div><a href="/login" onClick={Link.handleClick}>Log&nbsp;out</a></div>;
                            else
                                return <div><a href="/login" onClick={Link.handleClick}>Log&nbsp;in</a> or <a href="/signup" onClick={Link.handleClick}>Sign&nbsp;up</a></div>;
                        })()}
                    </nav>
                </div>
            </header>
        );
    }

    componentWillMount() {
        firebaseUtils.onChange = this.handleLogout;
    }

}

export default Header;

错误：

警告：React尝试在容器中重用标记，但是校验和无效。这通常意味着您正在使用服务器渲染和服务器上生成的标记不是什么客户期待。反应注入新的标记以补偿哪个但是你失去了服务器渲染的许多好处。相反，弄清楚为什么生成的标记是不同的客户端或服务器:(客户端）0.0.1.0.0“＆gt;注销＆lt; （服务器）0.0.1.0.0“＆gt;登录＆lt; / a＆gt;＆lt; span data-rea

似乎与isLoggedIn()函数有关：

var Firebase = require('firebase');
var forge = "https://and-scene-app.firebaseio.com/";
var ref = new Firebase(forge);
var cachedUser = null;

var formatEmailForFirebase =  function (email) {
    var key = email.replace('@', '^');
    if (key.indexOf('.') !== -1) {
        return key.split('.').join('*');
    }
    return key;
};

var addNewUserToFB = function (newUser) {
    var key = formatEmailForFirebase(newUser.email);
    ref.child('user').child(key).set(newUser);
};

var firebaseUtils = {
    createUser: function (user, cb) {
        ref.createUser(user, function (err) {
            if (err) {
                switch (err.code) {
                    case "EMAIL_TAKEN":
                        console.log("The new user account cannot be created because the email is already in use.");
                        break;
                    case "INVALID_EMAIL":
                        console.log("The specified email is not a valid email.");
                        break;
                    default:
                        console.log("Error creating user:", err);
                }
            } else {
                    this.loginWithPW(user, function (authData) {
                        addNewUserToFB({
                            email: user.email,
                            uid: authData.uid,
                            token: authData.token
                        });
                    }, cb);
            }
        }.bind(this));
    },
    loginWithPW: function (userObj, cb, cbOnRegister) {
        ref.authWithPassword(userObj, function (err, authData) {
            if (err) {
                console.log('Error on login:', err.message);
                cbOnRegister && cbOnRegister(false);
            } else {
                authData.email = userObj.email;
                cachedUser = authData;
                cb(authData);
                this.onChange(true);
                cbOnRegister && cbOnRegister(true);
            }
        }.bind(this));
    },
    isLoggedIn: function () {
        return cachedUser && true || ref.getAuth() || false;
    },
    logout: function () {
        ref.unauth();
        cachedUser = null;
        this.onChange(false);
    }
};

module.exports = firebaseUtils;

在服务器和客户端

0 个答案: