1

所以我试图用 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 响应的值）但应用程序一直显示“初始值”而不是实际响应类型，即使它显示在控制台中

我知道这与一些异步行为有关，但我不知道如何等待请求完成。

4

1 回答 1

0

更改这样的值不会触发重新渲染，这就是React您可以使用状态的原因。如果您更改状态，您的组件将重新渲染。这不会发生，因为您不使用导致组件显示默认值的状态。

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

这段代码显然不能开箱即用，但它显示了基础知识。

于 2020-08-22T14:26:05.233 回答