Отправка серверной части Реагировать компоненты, загружающие состояние через Ajax

Я изо всех сил стараюсь, чтобы мой компонент работал как на стороне клиента, так и на стороне сервера.Отправка серверной части Реагировать компоненты, загружающие состояние через Ajax

Это код для моего компонента:

export default class extends React.Component { 
    constructor(props, context) { 
     super(props, context); 

     this.state = { 
      title: props.params.title, 
      message: props.params.message 
     }; 
    } 

    componentDidMount() { 
     $.ajax({ 
      url: "/get-message", 
      success: function (result) { 
       this.setState({ 
        title: result.title, 
        message: result.message 
       }); 
      }.bind(this), 
      cache: false 
     }); 
    } 

    render() { 
     return (
      <div> 
       <h2>{this.state.title}</h2> 
       <h3>{this.state.message}</h3> 
      </div> 
     ); 
    } 
}

Он работает нормально. Когда он отображается на стороне клиента, он показывает как h2, так и h3 пустым, а затем они заполняются при возврате вызова ajax.

Когда он получает визуализацию, хотя сервер, я уже получаю эти реквизиты, и html, отправленный клиенту, уже завершен и не нуждается в чем-то дополнительном.

Проблема заключается в том, что, когда он визуализируется на сервере, я получаю сообщение об ошибке на клиенте:

Warning: React attempted to reuse markup in a container but the checksum was invalid. [...]

Затем вызывается метод АЯКС снова и снова делает все.

Итак, как мне обращаться с таким случаем? Есть ли способ сказать React, что этот компонент был отображен на сервере, принять его и не вызвать метод componentDidMount?

источник

2016-06-15 user3900456

Хотите ли вы на стороне сервера визуализации сделать вызов AJAX? поэтому у КЛИЕНТА будет ЗАКЛЮЧИТЕЛЬНАЯ разметка? –

вызов ajax вызовет метод, доступный на стороне сервера, так что никакого аякс-вызова на сервере не будет. Принятый ответ сделал то, что мне было нужно. благодаря – user3900456

Общим способом работы с этим является использование глобального состояния. Вы можете сериализовать объект JS в нижней части тега <body>, содержащий состояние, рассчитанное на стороне сервера.

<script>globalState={MyFeature: {title: 'foo'}};</script>

Затем используйте это состояние (или его ветвь) по умолчанию для своих компонентов.

например.

if (globalState.MyFeature.title) { 
    this.setState({ title: globalState.MyFeature.title }); 
} else { 
    $.ajax(/* ... */); 
}

Очевидно, что вы можете использовать Redux управлять глобальным состоянием хорошо, но вы на самом деле не потребность в. Однако есть много полезных пакетов, которые помогут вам оптимизировать этот процесс.

react router redux
redux-async-connect
serialize-javascript - вы можете использовать это без Redux

источник

2016-06-15 10:56:54 Grgur

Отправка серверной части Реагировать компоненты, загружающие состояние через Ajax

ответ

Смежные вопросы