React Native中如何从JSON数组获取并展示id字段？

我来帮你拆解一下你遇到的两个核心问题，以及对应的解决办法：

一、Fetch请求时的undefined is not a function错误原因 #

你在setState里尝试直接取responseJson[0].id，这里有两个潜在问题：

1. 如果请求返回的responseJson是空数组（比如接口临时出错或无数据），访问responseJson[0]会得到undefined，再取.id就会触发错误；
2. 其实你完全不需要把单个id存到state里——因为你要展示的是整个数组的所有id，后续FlatList会遍历dataSource，直接从每个item里取字段即可。

另外，检查你的fetch代码格式，确保箭头函数、括号的语法完全正确（从你贴的代码看，逗号后的注释位置可能导致解析异常，建议调整注释位置或移除）。

二、FlatList无法正确展示id的错误原因 #

你在renderItem里写了{this.state.responseJson.id}，这里有两个明显错误：

• 你的state里并没有responseJson这个字段，你把接口返回的数据存在了dataSource中；
• renderItem的({item})参数已经代表数组里的每一项，你应该直接访问item.id来获取当前项的id，而不是去state里找某个全局的id值。

三、正确的实现代码 #

1. 修正后的Fetch请求 #

fetch(`http://www.example.com/React/data.php`, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
})
.then((response) => response.json())
.then((responseJson) => {
  // 先判断返回数据是否为有效数组，避免空数据报错
  if (Array.isArray(responseJson)) {
    this.setState({
      isLoading: false,
      dataSource: responseJson,
    }, () => {
      // state更新完成后的回调操作
      console.log('数据加载完成');
    });
  } else {
    this.setState({ isLoading: false });
    console.error('接口返回数据格式错误');
  }
})
.catch((error) => {
  console.error(error);
  this.setState({ isLoading: false });
});

2. 修正后的FlatList渲染 #

<FlatList
  data={this.state.dataSource}
  ItemSeparatorComponent={this.FlatListItemSeparator}
  renderItem={({item}) => (
    <View>
      <Card>
        <View>
          <Text style={{marginTop: 30}}>
            {item.id}
          </Text>
        </View>
      </Card>
    </View>
  )}
  keyExtractor={(item, index) => index.toString()}
/>

额外提示 #

• 记得在组件构造函数里初始化state，避免未定义字段报错：

constructor(props) {
  super(props);
  this.state = {
    isLoading: true,
    dataSource: [],
  };
}

• 如果FlatListItemSeparator是组件的自定义方法，记得在构造函数里绑定this，或者用箭头函数定义方法，避免this指向异常。

内容的提问来源于stack exchange，提问作者Laney Williams