React Native - 如何解析 json 数据并将其设置在状态对象中

Posted 2023-02-22

【中文标题】React Native - 如何解析 json 数据并将其设置在状态对象中

【英文标题】：React Native - How to parse json data and set it in a state object

【发布时间】：2018-02-10 18:53:16

【问题描述】：

我有两个文件（在同一个目录中）：

Detail.json Base.js

Detail.json如下：

[
  
    "id": 1,
    "name": "A",
  ,
  
    "id": 2,
    "name": "B",
  ,
  
    "id": 3,
    "name": "C",
  
];

Base.js如下：

class Base extends Component 

state =  myDetail: [] ; 

//TODO 1: fetch JSON data from Detail.json and set it to myDetail object

//TODO 2: parse this data from myDetail to display as a single unit (eg: name)

我做到了：

import data from './Detail.json'

console.log(data) 给了我完整的 json 对象。但是当我这样做时：

this.setState(myDetail: data); 

& 然后console.log(myDetail); 在控制台中显示空对象。

谁能告诉我如何执行上述两项任务。谢谢。

【问题讨论】：

到目前为止您尝试过什么？具体来说，您在哪里遇到了麻烦？

@smarx 我做了：从 './Detail.json' console.log(data) 导入数据 - 这给了我完整的 json 对象。但是当我这样做时： this.setState(myDetail: data); & 然后 console.log(myDetail);它在控制台中显示空对象。

@alex 我已经更新了 JSON 格式。这是我正在使用的。你现在能建议吗。谢谢。

你只需要console.log(this.state.myDetail);吗？

所以简化问题。 this.setState(foo: 'bar'); console.log(this.state.foo); 显然不适合你。您可以删除问题中有关 JSON 文件的内容，而是添加您用于设置和检索状态的代码。

【参考方案1】：

正如 Yozi 在 cmets 部分所说，setState 是一个异步函数，您必须等待它的 promise 得到解决。

this.setState(foo: 'bar').then(() => 
  console.log(this.state.foo)
);

【参考方案2】：

这只是因为你的最后一个代码console.log在状态对象被setState方法更新之前被调用了。但是setState 带有第二个参数，它是状态更新后调用的回调。

this.setState(
     myDetails: data
, () => 
     console.log(this.state.myDetails);
);