提取API在实际设备上不起作用，但在模拟器上起作用

Question

我已经开发了一个带有API（http://lkcfesnotification.000webhostapp.com/api/notifications）的网站 。当我获取并在android仿真器（Android Studio）中运行时，所有数据均已获取图像：（https://imgur.com/a/QQ3nB14）。但是，当我构建一个APK文件并安装时，它显示空白并带有加载圆圈（https://imgur.com/a/CVOTEx1）。这与我从模拟器屏幕上得到的错误有关（警告列表中的每个孩子应该有唯一的“键”道具），以下是我获取数据屏幕的代码

import React, { Component } from 'react';
import {
  Alert,
  FlatList,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  TextInput,
  ActivityIndicator,
} from 'react-native';
import { FloatingAction } from 'react-native-floating-action';


type Props = {};
export default class IndexScreen extends Component<Props> {
  static navigationOptions = {
    title: 'Announcements',
    headerStyle: {
        backgroundColor: '#33FF99'
    },
  };

  constructor(props) {
    super(props)

    this.state = {
      data: [],
      isFetching: false,
     // value: ''
    };
    this._load = this._load.bind(this);
  }

  componentDidMount() {
    this._load();
  }
  searchFilterFunction = text => {
    this.setState({
      value: text
    });

    const newData = this.state.data.filter(item => {
      console.log(item.type)
      const itemData = `${item.title.toUpperCase()} ${item.department.toUpperCase()}`;
      const textData = text.toUpperCase();
      return itemData.includes(textData);
    });

    this.setState({
      data: newData
    });
  };


  _load() {
    this.setState({isFetching: true});

    fetch("http://lkcfesnotification.000webhostapp.com/api/notifications")
    .then((response) => {
      if(!response.ok) {
        Alert.alert('Error', response.status.toString());
        throw Error('Error ' + response.status);
      }

      return response.json()
    })
.then(({ data }) => {
    this.setState({data});
    this.setState({isFetching: false});
})
    .catch((error) => {
      console.log(error)
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.textInputStyle}
          onChangeText={text => this.searchFilterFunction(text)}
          value={this.state.value}
          underlineColorAndroid="transparent"
          placeholder="Search Here"
        />
        <FlatList

          data={this.state.data}
          showsVerticalScrollIndicator={true}
          refreshing={this.state.isFetching}
          onRefresh={this._load}
          renderItem={({item}) =>
            <TouchableHighlight
              underlayColor={'#cccccc'}
              onPress={() => {
                this.props.navigation.navigate('Show', {
                  id: item.id,
                  headerTitle: item.title,
                  refresh: this._load,
                })
              }}
            >
              <View style={styles.item}>
                <Text style={styles.itemTitle}>{item.department}</Text>
                <Text style={styles.itemSubtitle}>{item.title}</Text>
                <Text style={styles.itemDate}>{item.updated_at}</Text>                
              </View>
            </TouchableHighlight>
          }
          keyExtractor={(item, index) => {item.title}}
          extraData={this.state} 
        />
      </View>
    );
  }
}

我的预期输出是我的真实android设备应显示与模拟器相同的内容。