ReactNative: функция вызывается дважды автоматически внутри FlatList - PullRequest
Новая
       11

ReactNative: функция вызывается дважды автоматически внутри FlatList

0 голосов
/ 08 января 2020

У меня были проблемы с поиском решения глупой проблемы. В моем коде чего-то не хватает, но я пока не могу понять. С нетерпением ждем ваших ответов и информации относительно кода ниже:

Конструктор: 

    constructor(props) {
    super(props)
    this.TotalQuery = this.TotalQuery.bind(this);
    this.state = {
        isLoading: true,
        Query: [],
    }
    this.UserID();
}

Функция () 

  TotalQuery(product_id){
fetch(`http://:3000/api/v1/users/queries/${product_id}`, {
    method: 'GET',
}).then((response) => response.json()).then((resp => {
    this.setState({
        Query: resp
    })
})) .catch((error)=>{
    console.log("Api call error1");
    })
}

Вызов этого внутри Flatlist, как показано ниже: 

 <FlatList
     data={this.state.UserProducts}
     keyExtractor={(item, index) => index.toString()} 
     renderItem= { ({item}) => (

     <View style={styles.order}>
       <View style={styles.orderHeader}>
          <View style={styles.ohInfo}>
            <Text style={styles.ohLabel}>Ref#</Text>
            <Text style={styles.ohValue}>#2019-{item.product_id}</Text>
          </View>
          <View style={[styles.ohInfo, { backgroundColor: '#E7E7E7' }]}>
            <Text style={styles.ohLabel}>Amount</Text>
            <Text style={styles.ohValue}>€{item.price}</Text>
          </View>
          <View style={styles.ohInfo}>
            <Text style={styles.ohLabel}>Messages</Text>
            {this.TotalQuery(item.product_id)}
            {this.state.Query.map((i, index) => (
            <Text style={styles.ohValue}>{i.total}</Text>))}
          </View>
        </View>

     <View style={styles.profileImgContainer}>
        <View>
        <ImageBackground style={styles.profileImgContainer}>
        <Image source={{ uri: item.url }} style={[styles.profileImg]} />  
        </ImageBackground>
     </View>
    </View>

    <View style={styles.orderBottom}>
    <View style={styles.orderBottomLf}>
    <Image resizeMode={'contain'} style={{ width: 14, height: 14 }}
        source={require('../../assets/images/icon-pending-black.png')} />

    <Text 
     style={[styles.orderStatusText]}>
        {(item.status === 1) ? <Text style={styles.Approved}>Approved</Text> : null}
        {(item.status === 2) ? <Text style={styles.Sold}>Sold</Text> : null}
        {(item.status === 3) ? <Text style={styles.UnderReview}>Under Review</Text> : null}
        {(item.status === 4) ? <Text style={styles.Inactive}>Inactive</Text> : null}
        {(item.status === 5) ? <Text style={styles.Deleted}>Deleted</Text> : null}
   </Text>

   </View>

   <View style={styles.orderBottomRg}>
      <TouchableOpacity style={styles.profileImgContainer1} onPress={() => this.Sold(item.product_id)}>
      {(item.status === 1) ? <Image style={[styles.profileImg1]} source={require('../../assets/images/checked.png')}/> : null}
   </TouchableOpacity>
   </View>
   <View style={styles.orderBottomRg}>
      <TouchableOpacity style={styles.profileImgContainer2} onPress={() => {this.Delete(item.product_id)}}>
       {(item.status === 1 || item.status === 3 || item.status === 4) ? <Image style={[styles.profileImg2]} source={require('../../assets/images/delete.png')}/> : null }
   </TouchableOpacity>
   </View>
      </View>
    </View>
   )} 
  />

Выше находится рендеринг плоского списка, все отрисовывается только из него. Пожалуйста, проверьте.

1 Ответ

1 голос
/ 08 января 2020

Есть несколько проблем с вашим кодом.

Проблема в том, что вы вызываете функцию в методе Flatlist renderItem.

Способ работы Flatlist заключается в том, что вы передаете ему данные set, а затем он будет вызывать renderItem для каждой записи в этом наборе данных.

И затем, каждый раз, когда ваш компонент перерисовывает или дочерний элемент перерисовывает плоский список, будет делать это снова.

Кроме того, похоже, что вы хотите вызвать this.TotalQuery(item.product_id) для каждого элемента в вашем наборе данных, но вы сохраняете возвращаемое значение в одно значение состояния, поэтому каждый вызов с перезаписью предыдущего.

Я бы порекомендовал переместить ваш код renderItem в его собственный Component, и тогда каждый экземпляр Component может иметь свой собственный объект состояния, в котором вы можете сохранить возвращаемое значение из вызова функции.

...