Как отобразить данные ответа с помощью React

Question

Я создаю проект с помощью rabbitMQ и реагирую.

Я подключил сервер rabbitMQ и свое приложение для реагирования, и мне наконец удалось получить некоторые данные с сервера.

Я могу распечатать их данные в консоли (например, с помощью console.log ()), однако я не могу отображать данные в html.

Я пытался использовать async / await, но это не сработало.

function ServerTest() {

var a:any;
const client = createClient("admin", "1111");
    const queue = v4();
    

    client.onConnect = function () {
        console.log("connected to Stomp");

        subscribe(client, 'admin', queue, (payload: {}) => {              
            a = payload;
            a = a.UserInfo.userId
            console.log(a)
        })

        publish(client, 'api.user.info', 'admin', queue, {})

    }

    client.activate();

    
    return (<div>a: {a}</div>)
}

Answer 1

React не отслеживает изменения, происходящие в любой случайной переменной, будь то переменная a, поэтому пользовательский интерфейс не будет обновляться автоматически. Чтобы получить желаемую функциональность, здесь можно использовать ловушку useState.

Для этого импортируйте функцию useState.

import {useState} from 'react' 

Внутри функции используйте ее так:

function ServerTest() {

const [ valueA, setValueA ] = useState();

Начальное значение для valueA также может быть передано

const [ valueA, setValueA ] = useState(initialState);

valueA будет содержать текущее состояние, поэтому используйте его в операторе возврата

return (<div>a: {valueA}</div>)

Теперь, когда данные с сервера доступны, используйте setValueA, чтобы обновить значение valueA

subscribe(client, 'admin', queue, (payload: {}) => {              
            setValueA(payload.UserInfo.userId);

. При этом response автоматически обновит пользовательский интерфейс, чтобы он соответствовал текущему состоянию 'valueA'

Answer 2

ознакомьтесь с этой статьей: https://www.robinwieruch.de/react-hooks-fetch-data

В ней объясняется, как получать данные и отображать их с помощью React

Answer 3

• 1000 это в setA(a). При изменении значения aState компонент автоматически перерисовывается, и результат будет показан на странице.