React Context undefined in Server Render

Question

Я пытаюсь передать данные во время рендеринга на стороне сервера для простого приложения.

У меня есть этот поставщик данных и на сервере и на клиенте, и я использую глобальную переменную, чтобы ввести начальное состояние в клиенте:

import React, { Component } from 'react'; 

export default class SsrDataProvider extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { data: window.__INITIAL_STATE__ }; 
    } 

    getChildContext() { 
    return { data: this.state.data }; 
    } 

    render() { 
    return this.props.children; 
    } 
} 

SsrDataProvider.propTypes = { 
    children: React.PropTypes.object, 
}; 

SsrDataProvider.childContextTypes = { 
    data: React.PropTypes.object, 
}; 

На сервере, окна. INITIAL_STATE заменяется фактическими данными, передаваемых через опору:

renderToString(<SsrDataProvider {...renderProps} data={data} />) 

и поставщика данных предоставляет контекст маршрутизатора вместо детей ...

render() { 
    return <RouterContext {...this.props} />; 
} 

Проблема заключается в том, что контекст ISN t определяется при рендеринге сервера. Это похоже на то, что он никогда не проходил вообще. Затем, когда пакет javascript приходит к клиенту, он использует это окно. INITIAL_STATE переменная и выбирает, где остановился сервер. Он работает, но я мог бы также не делать рендеринг на стороне сервера. Есть что-то, что мне не хватает? или, может быть, renderToString() не поддерживает контекст?

Answer 1

Вы должны установить начальное состояние на основе props.data, если оно определено.

Действительно, вы даже не должны включать window.__INITIAL_STATE__ внутри компонента. Вместо этого вы также должны проходить в окне data, где бы вы ни отображали <SsrDataProvider> на стороне клиента.

export default class SsrDataProvider extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: props.data // || window.__INITIAL_STATE__ 
    } 
    } 
}