Question

作为ReactJS的新手，我试图解析RestfulAPI JSON响应，但是，我无法检索所有元素。尝试访问text.subjects.code和text.subjects.description时，它返回null。但是，我可以成功访问text.id和text.name。

JSON响应如下。

[
  {
    "id":95822,
    "name":"Alex",
    "subjects":[
      {
        "code": "101",
        "description": "Course 101"
      }
    ]
  }
]

请告知。

Answer 1

您可以通过多种方式进行迭代，而我一直更喜欢使用.forEach和.map

如果需要新数组，请使用.map。因为map返回一个新数组

async componentWillMount() {
try{
  await Expo.Font.loadAsync({
    montserrat: require("./assets/fonts/Montserrat.ttf"),
    montserrat_light: require("./assets/fonts/Montserrat_light.ttf"),
    montserrat_bold: require("./assets/fonts/Montserrat-Medium.ttf")
  });
  this.setState({ loading: false });
}catch(error){
  console.warn('Error loading fints', error);
}

// dataArray将包含所有对象

还有另一种制作地图的方式

  const dataArray = text.subjects.map(subject => {
      let obj = {};
      obj.code = subject.code;
      obj.description = subject.description;
      return obj;
 });

或者，如果您只想迭代数据，请使用.forEach。 forEach不返回数组

   const dataArray = text.subjects.map(subject => (
       let obj = {};
      obj.code = subject.code;
      obj.description = subject.description;
      return obj;
  );

Answer 2

如果您检查主题是一个数组并且没有从中获取价值，请尝试 text.subjects[0].code

Answer 3

因为主题是一个数组，所以您应该像下面这样map主题：

text.subjects.map((subject) => {
    console.log(subject.code, subject.description);
})

或直接获得您想要的索引，如下所示：

text.subjects[0].code

ReactJS：RestAPI JSON响应：如何解析

3 个答案: