Question

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

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);它在控制台中显示空对象。

有人可以告诉我如何执行上述两项任务。谢谢。

Answer 1

正如Yozi在评论部分中所说，setState是一个异步函数，你必须等待它的承诺得到解决。

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

Answer 2

这仅仅是因为在通过console.log方法更新状态对象之前调用了您的最后一个代码setState。但是setState使用第二个参数，它是状态更新后调用的回调。

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

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

2 个答案: