ReactNative：FlatList 內自動調用兩次的函數

Question

我一直在尋找解決這個愚蠢問題的辦法。 我的代碼中缺少一些我現在無法理解的東西。 期待您對以下代碼的回答和信息：

構造函數：

    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>
   )} 
  />

上面是 flatlist 渲染，一切都是從它渲染出來的。 請檢查。

Answer 1

您的代碼存在多個問題。

問題是您在 Flatlist renderItem方法中調用了一個函數。

Flatlist 的工作方式是給它一個數據集，然后它會為該數據集中的每個條目調用renderItem 。

然后，每當您的組件重新呈現或子項重新呈現時，Flatlist 都會再次執行此操作。

另外，看起來您想為數據集中的每個項目調用this.TotalQuery(item.product_id)但您將返回值保存為單個狀態值，因此每次調用都會覆蓋前一個。

我建議將您的renderItem代碼移動到它自己的Component ，然后每個Component實例都可以擁有自己的狀態對象，您可以在其中保存函數調用的返回值。