React Native展示MongoDB Atlas数据问题：终端有数据APP不显示

看起来你已经搞定了数据上传，也能在终端拿到数据，但就是FlatList不干活对吧？咱们一步步排查问题，很快就能解决：

1. 先把State的初始值搞对 #

FlatList需要数组类型的数据源，但如果组件初始化时title不是空数组，它会因为没有可渲染的内容直接隐身。赶紧在组件构造函数里初始化状态：

constructor(props) {
  super(props);
  this.state = {
    title: [], // 必须初始化为空数组
    description: []
  };
  // 别忘了绑定this，不然onPress里调用display会找不到正确的上下文
  this.display = this.display.bind(this);
}

2. 确认API返回的数据结构 #

你在console里打印了responseJson，仔细看看它的结构：

• 如果返回的是直接的对象数组（比如[{_id: "xxx", title: "标题1", description: "描述1"}, ...]），那你直接赋值给title没问题；
• 如果数据是包裹在某个字段里的（比如{data: [{...}, ...]}），那得改成this.setState({ title: responseJson.data })才行。

3. 修正FlatList的keyExtractor #

你的keyExtractor用了({id}, index) => id，但MongoDB里的唯一标识是_id不是id啊！而且万一某个数据没有_id（虽然不太可能），可以用index兜底：

keyExtractor={(item, index) => item._id ? item._id.toString() : index.toString()}

4. 检查renderItem的字段名 #

如果你的MongoDB数据里标题字段不是title（比如叫postTitle），那{item.title}肯定显示空内容。对照console里打印的responseJson字段名，确保和renderItem里的一致。

修正后的完整代码示例 #

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, FlatList, StyleSheet } from 'react-native';

class DataDisplay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: [],
      description: []
    };
    this.display = this.display.bind(this);
  }

  display(){ 
    fetch('myUrl', { method: 'GET' })
    .then((response) => response.json())
    .then((responseJson) => {
      console.log("拿到的数据:", responseJson);
      // 这里根据实际返回结构调整，比如如果是responseJson.data就改成对应字段
      this.setState({ title: responseJson })
    })
    .catch((error) => {
      console.error("请求出错了:", error);
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.display} style={styles.btn}>
          <Text style={{textAlign: 'center'}}> Display </Text>
        </TouchableOpacity>
        <FlatList 
          data={this.state.title} 
          renderItem={({item}) => (
            <View style={styles.itemContainer}>
              <Text style={styles.titleText}>{item.title}</Text>
              <Text style={styles.descText}>{item.description}</Text>
            </View>
          )} 
          keyExtractor={(item, index) => item._id ? item._id.toString() : index.toString()} 
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    marginTop: 50
  },
  btn: {
    padding: 15,
    backgroundColor: '#eee',
    borderRadius: 5,
    marginBottom: 20
  },
  itemContainer: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd'
  },
  titleText: {
    fontSize: 16,
    fontWeight: 'bold'
  },
  descText: {
    fontSize: 14,
    color: '#666',
    marginTop: 5
  }
});

export default DataDisplay;

最后再提两个容易踩的坑：

• 如果你的API是本地的，别用localhost，换成你电脑的IP地址；
• iOS要在Info.plist里配置ATS允许HTTP请求，Android要在AndroidManifest.xml里加网络权限。

内容的提问来源于stack exchange，提问作者Abdul Wahab