无法映射响应 json 数组

Question

我有来自以下格式的 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: undefined is not a function

Answer 1

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

您存储它的代码是正确的：

this.setState({
  subjects: res
})

所以我怀疑问题出在您设置 initial 状态的构造函数中。 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

记住state updates are asynchronous。

Answer 2

你可能需要初始化你的state.subjects:

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