时间戳

首页 > 解决方案 > 从 JSON 响应中获取 react js 中的数组数组

reactjs - 从 JSON 响应中获取 react js 中的数组数组

问题描述

实际上，我正在从 API 获取数据，每件事都运行良好，但是当我获取数组数组时，它会给出未定义的错误..我应该如何解决这个问题。任何帮助将不胜感激..提前致谢..

这是我从 api 得到的响应。

{data: Array(10), meta: {…}}
data: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
meta: {message: "Rider's list fetched successfully.", page: 1, per_page: 10, total: 134}
__proto__: Object

我想total从' meta'中获取..我已经将响应存储在名为data..的状态中，当我把console.log(this.state.data.meta.total)它给我错误时，比如：-Cannot read property 'total' of undefined

标签： reactjs

解决方案

Atin Singh 的答案将起作用，尽管它确实需要完整的响应对象。

查看对象解构以仅提取您想要的值。如果要将它们存储在单个变量中，只需将它们添加到对象中即可。不过，说到状态，越平坦越好。

const {data, meta: {total}} = response;
setState({data: {data, total});

您现在可以使用this.state.data.total

注意：您可能希望将状态属性数据的名称更改为其他名称，否则您将不得不访问它，this.state.data.data这很奇怪......

或者将返回的数据数组重命名为更具描述性的名称，而不仅仅是data. 例如，如果它是一组人，您可以执行以下操作：

const {data: people, meta: {total}} = response
setState({data: {people, total});

// this.state.data.people = [{...}, {...}, {...}]
// this.state.data.total = 134

请记住，状态更新可能是异步的，因此不要在设置状态后直接退出，因为这可能会给您带来误报

推荐阅读