React Native：POST请求获取JSON数据填充FlatList及解析问题

你目前遇到的FlatList空白问题，核心是代码里几个小疏漏导致的，我来一步步帮你修复：

1. 补上缺失的FlatList导入 #

你代码里用到了FlatList但没从react-native中导入它，这会导致组件无法被识别，先把它加到import语句里：

import { View, Text, TextInput, FooterTab, Button, TouchableOpacity, ScrollView, ListView, StyleSheet, ActivityIndicator, Header, FlatList } from 'react-native';

2. 正确解析groupData中的name字段 #

在renderItem方法里，你写的<Text style={styles.text}>Hospital name {name}</Text>里的name是未定义的变量，应该引用当前item对象的name属性，也就是item.name：

renderItem = ({ item }) => (
  <TouchableOpacity style={styles.item} activeOpacity={0.4} onPress={() => { this.clickedItemText(item); }}>
    <Text style={styles.text}>Hospital name {item.name}</Text>
  </TouchableOpacity>
);

3. 其他潜在问题优化 #

• 修正请求URL：你当前的请求URL是'http:///Dsenze/userapi/grouphier/viewgroup'，这里多了一个斜杠，应该改成类似'http://your-domain.com/Dsenze/userapi/grouphier/viewgroup'的正确格式，确保能正常获取数据。
• 初始化data为空数组：你state里的data初始值是null，虽然componentDidMount后会更新，但初始化为空数组[]可以避免FlatList在加载前出现异常：

this.state = {
  data: [],
  loading: true,
  search: '',
};

修改后的核心代码片段 #

class RenderList extends Component {
 static navigationOptions = {
 title: 'Selected Item',
 header: null,
 };
 constructor() {
 super();
 this.state = {
 data: [], // 初始化为空数组
 loading: true,
 search: '',
 };
 }
 componentDidMount() {
 this.createViewGroup();
 }
 createViewGroup = async () => {
 try {
 const response = await fetch(
 'http://your-domain.com/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 }) => id.toString();
 renderItem = ({ item }) => (
 <TouchableOpacity style={styles.item} activeOpacity={0.4} onPress={() => { this.clickedItemText(item); }}>
 <Text style={styles.text}>Hospital name {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>
 );
 }
}

做完这些修改后，你的FlatList应该就能正常显示每个医院的名称了。等列表显示正常后，再处理条目跳转的逻辑就没问题啦。

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