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不是一个函数

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: []
    }
  }
}

无法映射到响应json数组

2 个答案: