Ошибка в FlatList: попытался получить кадр для индекса вне диапазона NaN - PullRequest
Новая
       7

Ошибка в FlatList: попытался получить кадр для индекса вне диапазона NaN

0 голосов
/ 10 марта 2020

В моем собственном приложении реагирования у меня есть форма, в которую я ввожу указанные c месяц и год, чтобы показать некоторую информацию из моих данных SQL, используя PHP,

Проблема заключается в том, что я ввожу месяц или год, который не существует, выдает ошибку: Tried to get a frame for out of range index NaN

Я добавляю свойство flatList: список пуст, но он не работает, как я ожидаю !! (Через одну секунду сообщение с пустым списком показывает ошибку msg красным, и это потому, что я думаю, что пустой дочерний элемент я думаю)

Это мой код: 

  function Item({ title,title1,title2,title3 }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.title1}>{title1}</Text>
      <Text style={styles.title2}>{title2}</Text>
      <Text style={styles.title3}>{title3}</Text>
    </View>
  );
}


export default class FetchExample extends React.Component {
  constructor(props){
    super(props);
    this.state ={ isLoading: true,
    dataSource: [],
    month:'',
    year:'',
  }
  }

  userRegister = () =>{
    const month = this.state.month;
    const year= this.state.year;
    return fetch('http://192......',{
    method:'post',
    header:{
    'Accept':'application/json',
    'Content-type' :'application/json'
    },
    body:JSON.stringify({mois:month,annee:year})})
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson,});})
      .catch((error) =>{console.error(error);});

      this.setState({
      month:'',
      year:'',})
  }

  _listEmptyComponent = () => {
      return (
          <View>
           <Text>Votre choix n'existe pas </Text>
          </View>
      )
  }

  render(){
      return(
    <View style={{flex: 1}}>
        <View style={{backgroundColor:'#58ACFA',flex:1,justifyContent: 'center'}}>
        <TouchableOpacity style={{marginTop:32,marginLeft:20}} onPress={this.props.navigation.openDrawer }>
        <FontAwesome5 name="bars" size={24} color="#161924" />
        </TouchableOpacity >
        </View>
        <View style={{flex:1 ,flexDirection:'row' }}>
        <View style={styles.pass}>
        <TextInput placeholder='year ' style={{flex:1,paddingLeft:5}} onChangeText= {year=>this.setState({year})}/></View>
        <View style={styles.pass}>
        <TextInput placeholder='Month ' style={{flex:1,paddingLeft:5}} onChangeText= {month=>this.setState({month})}/></View>
        <View style={styles.pass}>
        <TouchableOpacity style={styles.butt} onPress={this.userRegister}>
        <Text style={{marginTop:8,color:'grey'}}>Afficher</Text>
        </TouchableOpacity></View>
        </View>
        <View style={{flex:7 ,paddingLeft:10 ,paddingTop:10 ,paddingBottom:10}}>
        <View  style={{ flexDirection:'row' }}>
        <Text  style={styles.head}> Client </Text>
        <Text  style={styles.head1}>Mois</Text>
        <Text  style={styles.head2}>Annee</Text>
        <Text  style={styles.head3}>ChiffreAffaire</Text>
        </View>
        <FlatList
        data={this.state.dataSource}
        renderItem={({item}) =><Item title={item.M500_NOM} title1={item.Mois} title2={item.Annee} title3={item.ChiffreAffaire}/>}
        ListEmptyComponent={this._listEmptyComponent}
        keyExtractor={(item, index) => index.toString()}

        />
</View>
    </View>

    );
  }
}
...