同構React App標記重用錯誤

Question

我正在構建一個非常簡單的同構React / Redux應用程序，並且在一個容器中，我想加載用戶的詳細信息和他們的專輯列表。

服務器端和客戶端都可以正常工作，但出現錯誤：

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) iv data-reactid="2">Loading...</div></di
 (server) iv data-reactid="2"><a href="/users" dat

我了解這是因為服務器和客戶端在加載時可能會有所不同，因為客戶端需要更長的時間來獲取數據。 但是，如何解決這個問題？

如果刪除{!user}返回，則該頁面不呈現，並且收到一條錯誤消息，指出{user.firstName}不存在。

這是我的組件代碼：

// IMPORT DEPENDENCIES
// ==============================================

import React, {Component, PropTypes} from 'react';
import {Link} from 'react-router';
import {connect} from 'react-redux';
import {getAlbumsByUserId} from '../../redux/album/albumActions';
import {getUser} from '../../redux/user/userActions';

// USER CONTAINER
// ==============================================

export class User extends Component {

static propTypes = {
    getAlbumsByUserId: PropTypes.func,
    getUser: PropTypes.func,
    params: PropTypes.object,
    user: PropTypes.object
};

static needs = [
    getAlbumsByUserId,
    getUser
];

componentWillMount () {
    this.props.getAlbumsByUserId();
    this.props.getUser();
}

render () {
    const {albums, user} = this.props;

    if (!user) {
        return <div>Loading...</div>;
    }

    return (
        <div>
            <Link to='/users'>Back to users</Link>
            <h1>User: {user.firstName} {user.lastName}</h1>

            {albums &&
                albums.map((album) =>
                    <div key={album.id}>
                        <h2>
                            <Link to={`/albums/${album.id}`}>
                                {album.title}
                            </Link>
                        </h2>
                    </div>
                )
            }
        </div>
    );
}
}





// MAPPINGS
// ==============================================

const mapStateToProps = ({albums, users}) => {
    return {
        albums: albums.list.items,
        user: users.activeItem.item
    };
};

const mapDispatchToProps = (dispatch, props) => {
    return {
        getAlbumsByUserId: () => { dispatch   (getAlbumsByUserId(props.params)); },
        getUser: () => { dispatch(getUser(props.params)); }
    };
};





// EXPORT
// ==============================================

export default connect(mapStateToProps, mapDispatchToProps)(User);

static needs告訴服務器在頁面加載時需要執行哪些操作。

Answer 1

看來我需要使用ComponentDidMount而不是ComponentWillMount

Answer 2

通常，當使用同構方式時，我們將來自服務器的inital data與索引文件一起傳遞，而不是使用ajax加載數據。 例如，在我們的主要HTML文件中，

<script>
  var APP_PROPS = JSON.stringify(props);
</script>

並將這些數據用於初始渲染。