React Native：函数在 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>
   )} 
  />

上面是平面列表渲染，一切都只从它渲染。请检查。

Answer 1

您的代码存在多个问题。

问题是你在 Flatlist renderItem 方法中调用一个函数。

Flatlist 的工作方式是你给它一个数据集，然后它会为该数据集中的每个条目调用renderItem。

然后，任何时候您的组件重新渲染或子项重新渲染 Flatlist 都会再次执行此操作。

另外，您似乎想为数据集中的每个项目调用this.TotalQuery(item.product_id)，但您将返回值保存为单个状态值，因此每次调用都会覆盖前一个。

我建议将您的 renderItem 代码移动到自己的 Component 中，然后每个 Component 实例都可以拥有自己的状态对象，您可以在其中保存函数调用的返回值。