React Native FlatList无法显示JSON数据问题求助

嘿，我帮你定位到了问题的核心，两个小调整就能让你的列表正常显示数据：

问题1：renderItem未渲染数据内容 #

你的FlatList已经正确获取到了JSON数据，也能响应点击跳转，但列表项看起来空白，是因为renderItem方法里的TouchableOpacity容器没有任何展示数据的组件——相当于你只做了可点击的“空盒子”，但没把内容放进去。

问题2：重复定义keyExtractor #

你连续写了两次keyExtractor，后面的定义会覆盖前面的。用name作为key存在风险（可能有重复名称的项），而接口返回的id是唯一值，更适合作为列表项的key。

修改后的代码 #

修复renderItem和keyExtractor的RenderList组件：

class RenderList extends Component {
  static navigationOptions = {
    title: 'Selected Item',
    header: null,
  };
  constructor() {
    super();
    this.state = {
      data: null,
      loading: true,
      search: '',
    };
  }
  componentDidMount() {
    this.createViewGroup();
  }
  createViewGroup = async () => {
    try {
      const response = await fetch(
        'http:///Dsenze/userapi/grouphier/viewgroup', // 注意这里的URL可能需要补全域名
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            password: 'admin',
            username: 'admin',
            viewall: 'false',
            id: [4],
            startlimit: '0',
            valuelimit: '10',
          }),
        }
      );
      const responseJson = await response.json();
      const { groupData } = responseJson;
      this.setState({
        data: groupData,
        loading: false,
      });
    } catch (e) {
      console.error(e);
    }
  };
  clickedItemText(clickedItem) {
    this.props.navigation.navigate('Item', { item: clickedItem });
  }
  updateSearch = search => {
    this.setState({ search });
  };
  // 只保留一个keyExtractor，用唯一的id作为key
  keyExtractor = ({ id }) => id.toString();
  
  // 修改renderItem，添加Text组件展示数据
  renderItem = ({ item }) => (
    <TouchableOpacity style={styles.item} activeOpacity={0.4} onPress={() => {
      this.clickedItemText(item);
    }}>
      {/* 这里渲染item的name字段，你也可以根据需要添加其他数据 */}
      <Text style={styles.text}>{item.name}</Text>
    </TouchableOpacity>
  );
  render() {
    const { loading, data } = this.state;
    return (
      <ScrollView>
        <View style={styles.container1}>
          {loading ? (
            <ActivityIndicator size="large" />
          ) : (
            <FlatList data={data} renderItem={this.renderItem} keyExtractor={this.keyExtractor} />
          )}
        </View>
      </ScrollView>
    );
  }
}

额外提示 #

你代码里的请求URL http:///Dsenze/userapi/grouphier/viewgroup 看起来缺少域名部分（比如http://your-domain.com/Dsenze/...），如果实际运行中请求失败，记得检查这个URL是否正确。

内容的提问来源于stack exchange，提问作者Abhigyan Gaurav