Javascript ReactNative：在FlatList中自动调用两次函数

我一直很难找到解决这个愚蠢问题的办法。我的代码中缺少一些我现在无法理解的东西。期待您的回答和关于以下代码的信息：

建造商：

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

函数（）

在平面列表中调用此函数，如下所示：

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

index.toString（）}
renderItem={（{item}）=>(
参考号#
#2019-{item.product_id}
数量
欧元{项目价格}
信息
{this.TotalQuery（item.product_id）}
{this.state.Query.map（（i，index）=>(
{i.total}}）
{（item.status==1）？已批准：空}
{（item.status==2）？已售出：空}
{（item.status==3）？正在审查中：null}
{（item.status==4）？非活动：null}
{（item.status==5）？已删除：null}
此.salled（item.product\u id）}>
{（item.status==1）？：null}
{this.Delete（item.product_id）}>
{（item.status==1 | | item.status==3 | | item.status==4）？：null}
)} 
/>

---

上面是平面列表渲染，所有内容都是从平面列表渲染的。请检查。

您的代码存在多个问题

问题是您正在Flatlist

renderItem

方法中调用函数

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

renderItem

然后，每当组件重新渲染或子项重新渲染时，平面列表将再次执行此操作

另外，看起来您希望为数据集中的每个项目调用

this.TotalQuery（item.product\u id）

，但您正在将返回值保存为单个状态值，因此每次调用都会覆盖上一个状态值

---

我建议将您的

renderItem

代码移动到自己的

组件中，然后每个
组件
实例都可以有自己的状态对象，您可以在其中保存函数调用的返回值。
请发布整个平面列表，以便我们可以帮助您找出错误所在，你所提供的不是enough@TravisJames更新了，请检查好的。查看您的更新，我仍然没有看到任何函数被调用。什么函数被调用了两次，你从哪里调用它？@TravisJames-{this.TotalQuery（item.product_id）}这是我调用的函数，你可以在Style=ohInfo下找到它。这已经被调用了两次。感谢您抽出时间，我一定会尝试并实现这一点。
 <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>
   )} 
  />