Блог

итак, я пытаюсь вызвать простой серверный сервис с помощью react (К вашему сведению, я не слишком много знаю о react или javascript)

 
import React from 'react';
import logo from './logo.svg';
import './App.css';

const {EchoRequest, EchoResponse} = require('./proto/api_pb.js');
const {EchoServiceClient} = require('./proto/api_grpc_web_pb.js');
var echoService = new EchoServiceClient('http://localhost:8081');

function App() {
    var request = new EchoRequest();
    request.setMessage("Pew Pew Pew")
    let message = "initial value"
    echoService.echo(request, {}, function (err, response) {
        console.log(response.getMessage())
        message = response.getMessage()
    });
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <p>
                    {message}
                </p>
            </header>
        </div>
    );
}

export default App;
  

Я пытаюсь создать шаблон возвращаемого значения message (который должен иметь значение ответа echoService.echo)
но приложение продолжает показывать «начальное значение» вместо фактического типа ответа, даже если оно отображается в консоли

Я знаю, что это связано с некоторым асинхронным поведением, но я не знаю, как дождаться завершения запроса.

Изменение такого значения не вызовет повторной визуализации, вот почему в React вы можете использовать state . Если вы измените состояние, ваш компонент будет повторно отображаться. Этого не происходит, потому что вы не используете состояние, в результате которого ваш компонент показывает значение по умолчанию.

Вот небольшая документация о том, как работает state:https://reactjs.org/docs/state-and-lifecycle.html

Чтобы решить вашу проблему, вы можете использовать перехват React, подобный этому:

 import {useState} from 'react'
const [message, setMessage] = useState("initial value")

// Do some stuff here

setMessage(response.getMessage())
  

Очевидно, что этот код не будет работать «из коробки», но он показывает основы.