Question

我正在构建一个应用程序，该应用程序将连接到返回以下内容的api端点：

[
  {batchName: "wqrs1", totalJobs: X1, numErrJobs: Y1, numCmpltJobs: Z1, inFlightJobs: K1},
  {batchName: "wqrs2", totalJobs: X2, numErrJobs: Y2, numCmpltJobs: Z2, inFlightJobs: K2},
  {batchName: "wqrsN", totalJobs: XN, numErrJobs: YN, numCmpltJobs: ZN, inFlightJobs: KN},
]

从api端点/get-all-batches中

使用Reactjs在仪表板中显示（我很新）。我想了解的是当值X，Y，Z，K更改时如何更新我的反应存储/状态。有人可以区分套接字，长时间轮询还是异步/等待？这是我要做这类事情时要看的吗？

Answer 1

您可以参考以下内容（答案和帖子）：https://stackoverflow.com/a/53749735/2269464。答案包含有用的见解，可帮助您从React开始。

最重要的部分是.on("value"..触发后的setState调用。

export default ...... extends Component {
  constructor() {
    this.state = {
      currentToken: 'first value'
    }
  }

  componentDidMount() {
      var that = this;
      var updateDb = firebase.database().ref("currentToken");
      updateDb.on("value", function(snapshot) {
          that.setState({ currentToken: snapshot.val() });
      });
  }

（setState）将告诉组件重新渲染，因此，如果您具有下面的代码，则将首先看到first value，当firebase触发时，您将通过react为您重新渲染新值：

render() {
  return <div>{this.state.currentToken}</div>
}

React.js中的套接字，长轮询和异步

1 个答案: