Реагировать на JS, получать данные Express JS, отправленные с помощью API визуализации - PullRequest
0 голосов
/ 15 октября 2018

Есть ли способ получить данные, отправленные с помощью Express JS render() API в компоненте React?Данные express пересылаются, но единственный уровень, который я могу уловить, - это шаблон pug, но я хочу передать или перехватить их в компоненте React, чтобы я мог получить больше данных из базы данных внутри компонента.Основная проблема заключается в том, что данные, которые я хочу отправить, происходят из passport после проверки подлинности пользователя.Это экспресс-маршрут

response.render(path.resolve('views', 'account.pug'), {user: request.user});

, и это часть pug шаблона

body
        #navbar
        #account

, в котором я отображаю этот компонент

class Account extends React.Component
{
    constructor(props)
    {
        super(props);
    }

    componentWillMount()
    {
        console.log(this.props);
    }

    render()
    {
        return(
            <div class='account'>

            </div>
        );
    }
}

Я хочузнать, есть ли элегантный способ сделать это, без манипуляций с cookie или других обходных путейЕсли нет, то как бы вы предложили лучший способ отправки данных из бэкэнда в компонент React?

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Вы должны визуализировать данные непосредственно в конструкторе Компонента. неэкранированная интерполяция из pug справится с этим без необходимости какого-либо вторичного обратного вызова API к серверу.

class Account extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state.user = !{JSON.stringify(user)};
    }
    ...

Наше приложение делает нечто очень похожее с Vue.js, оно оченьэффективная и очень высокая производительность с точки зрения пользователя.

Примечание: мои знания о реагировании ограничены, поэтому this.state.user может быть не совсем то место, которое вам нужно.Тем не менее, я уверен, что это то место, куда вы должны поместить данные в React на сервере.

0 голосов
/ 15 октября 2018

Вам нужно перенести ваши данные через HTTP-ответ, что в основном означает либо заголовок, cookie, либо тело, так или иначе.Технически кузов, наверное, самый простой.В этом случае что-то вроде атрибута данных в элементе #account, который содержит всю необходимую информацию и затем читается во время инициализации компонентов реагирования.Если вы работаете с контейнером состояний, например, с избыточностью, вы можете захотеть добавить пользовательские данные в исходное состояние, которое вы уже можете передать.

Просто для повторения результата комментария туда-сюда.В этом конкретном случае может даже не потребоваться передавать данные клиентской стороне, поскольку это данные о вошедшем в систему пользователе, которые должны находиться в сеансе на стороне сервера.Таким образом, создания конечной точки для извлечения данных «текущего пользователя» может быть достаточно для извлечения их во внешнем интерфейсе без специального предоставления идентификатора пользователя.

...