javascript - 无法在 React 组件中显示从获取的序列化 api 获取的信息

Question

我正在开发一个 Web 应用程序，它根据用户搜索从 api 获取音乐会。但是，由于我想将不同用户的属性添加并保存到这些音乐会中，因此我决定当用户单击单个音乐会的链接时，它 a) 会保存到数据库中，然后 b) 会呈现单个卡片组件为了那场音乐会。然而，在单个卡片中呈现的数据不是来自外部 API 的数据，而是从我自己的数据库中获取的数据，以填充我的用户输入的额外属性。这本身就已经是一种痛苦了。现在-问题是:出于某种原因，每当我尝试显示两级深度的 redux 状态的数据时，比如说 concerts.attributes.venue ，我得到一个TypeError: Cannot read property 'venue' of undefined 。我拥有的任何嵌套属性都会发生这种情况。对于更多上下文，我使用钩子(Hook)从我的功能音乐会组件中的数据库中获取数据。我还尝试将其转换为具有生命周期方法的类组件，但存在同样的问题。我的一部分认为这是获取的异步本质，在整个序列化数据返回之前进行数据渲染？我不知道。有人知道如何纠正这个问题吗？

Answer 1

分享代码片段以便更好地理解。仅凭文字来可视化代码有点困难。

您将从 Api 获得一些数据作为响应。您需要将该数据存储到某个变量中。有点像这样

JS 中的 XHR 调用并将响应存储到 var x

let x;
function successListener() {  
var data = JSON.parse(this.responseText);   //to parse the data to json format
x=data;
}

function failureListener(err) {  
  console.log('Request failed', err);  
}
var request = new XMLHttpRequest();  
request.onload = successListener;  
request.onerror = failureListener;  
request.open('get', 'URL', true);  
request.send();

然后像这样访问您需要的数据:

x[key][subkey] 

不知道你在这里做什么

concerts.attributes.venue