具有反应返回值和异步行为的gRPC Web

问题描述

所以我试图用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的原因。如果更改状态，则组件将重新渲染。不会发生这种情况是因为您不使用状态导致组件显示默认值的状态。

以下是有关状态如何工作的一些文档：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())

该代码显然无法立即使用，但它显示了基本知识。