无法映射响应JSON数组

Question

i具有以下格式的API的JSON响应

[ 
  {
    id: 1,
    class: '10',
    section: 'A',
    subject: 'Social'
  },
  { 
    id: 2,
    class: '8',
    section: 'C',
    subject: 'Social'
  },
  {
  id: 3,
  class: '9',
  section: 'A',
  subject: 'Social'
  } 
]

我将JSON响应存储在状态变量中，并能够成功打印上述JSON数组。

async ListAllTodaysClasses() {
    try {
      let data = new FormData();
      data.append('id', this.state.id)
      data.append('year',this.state.year)
      data.append('month',this.state.month)
      data.append('day', this.state.day)
      var url = this.state.url;
      console.log(url);
      let response = await fetch(url, {
          method: 'POST',
          body: data
      });
      let res = await response.json();
      this.setState({
        subjects: res
      })
      console.log(this.state.subjects)
    } catch(error) {
      this.setState({error: error});
      console.log("error " + error);
    }
  }

在这里，我试图循环浏览JSON响应数组。

this.state.subjects.map((item, key) => (
  <TouchableOpacity key={key}>
    <View>
      {
        <Text style={styles.textColor2}>{item.class}th-{item.section}/ {item.subject}</Text>
      }
    </View>
  </TouchableOpacity>
))

，但我正在得到TypeError：未定义不是函数

Answer 1

您的问题与JSON无关。您正在存储调用response.json()的结果，该结果将在响应中解析JSON并返回分析结果。

存储的代码是正确的：

this.setState({
  subjects: res
})

因此，我怀疑问题在您的构造函数中，您可以在其中设置初始状态。subjects的正确初始状态就是这样：

// In your constructor
this.state = {
    /*...any other state you have...*/,
    subjects: []
};

请注意，subjects是一个空数组。我怀疑您将其设置为{}(一个空对象(或""(一个空字符串(或类似。(显然，您不会初始化它，而不是使用null，因为这会产生不同的错误。(

---

旁注：尽管您的setState呼叫正确，但接下来的不是：

  this.setState({
    subjects: res
  })
  console.log(this.state.subjects) // <=== Will not see the updated state

请记住，状态更新是异步的。

Answer 2

您可能需要启动您的state.subjects：

class YourClassName extends React.Component {
  constructor() {
    this.state = {
      subjects: []
    }
  }
}