时间戳

首页 > 解决方案 > 在接收到 REST 端点数据之前执行下一步并且无法呈现状态属性

reactjs - 在接收到 REST 端点数据之前执行下一步并且无法呈现状态属性

问题描述

在我的 React js 应用程序中，我使用了一个响应时间较长的端点，有时也需要 1.5 秒（因为它从 Big Query 获取数据）。所以下一步执行，最后它无法获得价值并且什么也不渲染。但是在收到响应后，我可以在浏览器的控制台中找到可用的值。

细节：

axios.get(url)
        .then(function(response) {
          this.setState({ listusers: response.data });          
        })
        .catch(function(error) {
          console.error(error);
        });

在渲染方法中：

{this.state.listusers.length ? (
 this.state.listusers.map(
     element =>  "Time Stamp: " +  element.Timestamp +  " - MacAddress: " +
                element.MacAddress +" - DeviceID: " + element.DeviceID
            )  ) : (  <p>No Data</p>      )}

即使使用 setTimeout 也无法渲染。

有什么出路吗？

谢谢。

标签： reactjs

解决方案

你应该从 map 表达式中返回一个 DOM，比如说：
this.state.listusers.map( element => element ? <p> "foo"+element.bar+"other..." </p> : <p> no data </p> )

因为你只是在构造一个字符串，而不是返回任何要渲染的东西，

还要检查你的三元条件运算符语法，我猜不是你的意思

推荐阅读