javascript - 解析 JSON 对象数组并在 ReactJS 中显示它

Question

最近我的 React 应用程序遇到了一个奇怪的问题。我正在尝试解析包含带有数据的数组的 JSON 对象。数据是这样的:

{"地点":"旧金山","国家":"美国", "作者":{"姓名":"xyz", "标题":"从星星上看"}, "年份": "2018", "地点":[{"价格":"免费", "地址":"sfo"},{"价格":"$10","地址":"博物馆"}] }

数据包含多个数组，如我刚刚显示的作者示例。我有一个从 URL 获取此数据的函数。我在 componentDidMount 中调用该函数。该函数获取数据，即responseJson，然后将其存储在一个空数组中，我使用setState将其设置为结果。在我的状态下，我的结果是:[]。我的代码如下所示:

this.setState({result:responseJson})

现在，当我尝试从结果中访问作者姓名时，出现错误。所以像这样:

{this.state.result.Author.Name}

我正在一个用来显示内容的函数中执行此操作。我在返回渲染函数时调用此函数。我收到一条错误消息:

类型错误:无法读取未定义的属性“名称”。如果我尝试任何低于内部级别的内容，我会得到同样的错误。如果我显示 {this.state.result.Place} 或 {this.state.result.Country} 一切都很好。但如果我尝试说 {this.state.result.Author.Title} 或 {this.state.result.Places[0].Price} 它会给我同样的错误。令人惊讶的是，我已经在我的不同组件中解析了同一个对象，并且没有出现任何错误。谁能解释一下为什么会发生这种情况？

如果我在 fetch 调用函数中 setState 时存储单个元素，我可以显示它。例如:

{result:responseJson,
 AuthorName:responseJson.Author.Name
 }

然后我就可以继续将其用作 {this.state.AuthorName}。

请帮我找到解决这个问题的方法。提前致谢!

Answer 1

您的状态对象可能在第一次渲染时为空，并且仅在请求完成后(即第一次渲染后)使用来自 API 的数据进行更新。 Name 和 Place 属性不会抛出错误，因为它们可能解析为未定义。

尝试在渲染方法中放置一个 if block 来检查结果是否已加载，如果尚未加载，则显示加载指示器。

我猜你的初始状态是这样的:

{ results: {} }

如果没有看到更多代码，很难说。

[编辑]:添加聊天注释

首次渲染时数据不可用。呈现该组件的事件序列如下所示:

1. 实例化组件，初始状态设置为{ results: [] }
2. 组件已挂载，API 调用已触发(注意，这是异步的，并且尚未返回数据)
3. 第一次调用 Render 方法。这种情况发生在 API 请求返回数据之前，因此状态对象仍然是 {results: [] }。此时任何获取作者的尝试都会抛出错误，因为 results.Authors 是 undefined
4. API 请求返回数据，setState 调用将状态更新为 { results: { name: 'test',author: [...] } }。这将触发组件的重新渲染
5. 第二次调用 Render 方法。仅在此时，状态对象中才有数据。