如何在ListView上显示JSON数据由POST请求API进行反应本机

Question

在这里，我正在尝试从API Post方法获取数据并尝试在ListView上填充数据，然后选择了我将转到Net Page的特定数据。通过获取方法，我做到了。但是，当我运行此代码时，空白列表即将到来。如何从groupdata.name中解析值？在列表上获取数据后，我可以选择特定数据并将其发送到其他屏幕，但是现在，如何在列表中填充数据？

    import React, { Component } from 'react';
    import { View, Text, TextInput,   
    FooterTab,Button,TouchableOpacity, ScrollView,ListView, StyleSheet,
     ActivityIndicator ,Header,icon} from 'react-native';
    import { createStackNavigator } from 'react-navigation';  
    import { SearchBar } from 'react-native-elements';

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
   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',
        {
          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 {name}</Text>
    </TouchableOpacity>
  );
  render() {
    const { loading, data } = this.state;
    return (
      <ScrollView>
        <View style={styles.container1}>
          {this.state.loading ? (
            <ActivityIndicator size="large" />
          ) : (
            <FlatList
              data={data}
              renderItem={this.renderItem}
              keyExtractor={this.keyExtractor}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}   
    class ClickedItem extends Component
    {
        constructor() {
            super();
            this.state = {
              inputValue: '',
              // Default Value of the TextInput
              // Default value for the QR Code
            };
          }
        static navigationOptions = 
        {
            title: "Selected Item",
            header:  null
        };
        render()
        {
            return(
                <ScrollView>
                <View style = { styles.container2 }>
        <TextInput style={styles.inputBox}
         underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Hospital Id"
          editable={false}
          placeholderTextColor="#000000"
          onChangeText={(hospital_id) => this.setState({hospital_id})}>{ this.props.navigation.state.params.item.id }</TextInput>
       <TextInput   style={styles.inputBox}
         underlineColorAndroid='rgba(0,0,0,0)'
          placeholder="Field 2"
          secureTextEntry={false}
          placeholderTextColor="#000000"
          onChangeText={(Field2) => this.setState({Field2})}/>
    <TouchableOpacity style={styles.button}onPress={() => {Insert(this.state.hospital_id,this.state.Field2,this.state.Field3,this.state.Field4,this.state.Field5,this.state.Field6);{this.getTextInputValue}}}>
              <Text style={styles.buttonText}>Insert</Text>
          </TouchableOpacity>
                </View>
                </ScrollView>
            );
        }
    }
    export default InvDemoPost = createStackNavigator(
    {
        List: { screen: RenderList,
                 header: true},
        Item: { screen: ClickedItem,
                header: null }
    });

    const styles = StyleSheet.create(
    {
        container1:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        },
        container2:
        {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            paddingHorizontal: 15
        },
        inputBox:{
            width:300,
            borderColor: '#48BBEC',
            backgroundColor: '#F8F8FF',
            borderRadius:25,
            paddingHorizontal:16,
            fontSize:16,
            color:'#000000',
            marginVertical:10, 
        },
        button:{
            width:300,
            backgroundColor:'#4169E1',
            borderRadius:25,
            marginVertical:10,
            paddingVertical:16
        },
        buttonText:{
        fontSize:16,
        fontWeight:'500',
        color:'#ffffff',
        textAlign:'center'
        },
        item:
        {
            padding: 15
        },
        text:
        {
            fontSize: 18
        },
        separator:
        {
            height: 2,
            backgroundColor: 'rgba(0,0,0,0.5)'
        }
    });

下面是JSON数据，我必须在列表视图上填充

{
      "groupData": [{
        "hierarchy": 4,
        "id": 4,
        "name": "St.Mary's Hospitals",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 5,
        "name": "Mandya Clinic",
        "parent": 6,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 7,
        "name": "Blr Clinic",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 8,
        "name": "kings hospital",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 9,
        "name": "jason hospital",
        "parent": 3,
        "type": 1
      }],
      "success": "true"
    }

Answer 1

我正在使用以下输出：

{
      "groupData": [{
        "hierarchy": 4,
        "id": 4,
        "name": "St.Mary's Hospitals",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 5,
        "name": "Mandya Clinic",
        "parent": 6,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 7,
        "name": "Blr Clinic",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 8,
        "name": "kings hospital",
        "parent": 3,
        "type": 2
      }, {
        "hierarchy": 4,
        "id": 9,
        "name": "jason hospital",
        "parent": 3,
        "type": 1
      }],
      "success": "true"
    }

假设此对象分配给this.state.dataSource

<FlatList
  data={this.state.dataSource.groupData}
  renderItem={({item: { name }) => <Text>{name}</Text>}
  keyExtractor={({id}) => id.toString()}
/>

，但是，您必须记住，您正在在componentDidMount中获取数据，这是在第一个render之后调用的。这意味着this.state.dataSource将是空的，直到您的API呼叫成功为止。

您可以添加其他状态变量isLoading。然后在您的render函数内部，您可能有一些逻辑来渲染旋转器或列表，具体取决于您的API调用状态。

render() {
  const { isLoading, dataSource: { groupData } } = this.state;
  if(isLoading) {
    return <Text>Loading</Text>
  }
  return (
    <FlatList
      data={groupData}
      renderItem={({item: { name }) => <Text>{name}</Text>}
      keyExtractor={({id}) => id.toString()}
    />
  )
}

然后在API调用的逻辑内部，在此设置dataSource，然后可以将isLoading设置为false。

更新以反映有问题的代码

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',
        {
          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 {name}</Text>
    </TouchableOpacity>
  );
  render() {
    const { loading, data } = this.state;
    return (
      <ScrollView>
        <View style={styles.container1}>
          {this.state.loading ? (
            <ActivityIndicator size="large" />
          ) : (
            <FlatList
              data={data}
              renderItem={this.renderItem}
              keyExtractor={this.keyExtractor}
            />
          )}
        </View>
      </ScrollView>
    );
  }
}