加载 Flatlist 时调用 TouchableOpacity 的 onPress答案

【问题标题】：onPress of TouchableOpacity gets called when loading Flatlist加载 Flatlist 时调用 TouchableOpacity 的 onPress
【发布时间】：2020-09-30 13:24:02
【问题描述】：

我有一个带有搜索功能的平面列表。在下一步中，我希望在我按下项目时发生一些事情。我面临的问题是 TouchableOpacity 是可见的，但是按下它时什么也没有发生。我已经尝试过使用 Button 并遇到同样的问题。

onPress 不是在按下某物时被调用，而是在屏幕立即加载后以某种方式被调用。例如，如果我使用 console.log(item.title) 我会在我的控制台日志中获得当前在平面列表中的所有标题。

我花了好几个小时试图找出造成这种情况的原因，但似乎找不到任何原因。非常感谢任何帮助。

我有一个填充了数据的平面列表，设置如下：

         return (
          <View style={styles.list}>
            <FlatList
              data = {this.state.data}
              renderItem={renderListItem}
              keyExtractor={item => item.id}
              ListHeaderComponent={this.renderHeader}
              
            />
     
          </View>
        );
      }
    }
    
    
       const renderListItem = (item) => {
        return (
        
          <MyTouchable
            id={item.item.id}
            title={item.item.title}
      
         
          />
        );
      }

MyTouchable 组件如下所示：

          <View>
       <TouchableOpacity onPress={console.log("Pressed")}>
      <View style={styles.mainView}>
      <View>
       <Text style={styles.text}>{props.id} {props.title}</Text> 
    
       
       </View>
  
      
      </View>
    </TouchableOpacity>
     </View>

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

尝试在箭头函数中传递 console.log

<TouchableOpacity onPress={() => console.log("Pressed")}>
 ...
</TouchableOpacity>

【讨论】：

谢谢！知道我错过了一些微小的东西，就是这样！

【解决方案2】：

你不能这样写：<Component makeThing={myFunc()} />。如果你没有使用useCallback，你应该这样写：<Component makeThing={() => myFunc()} />。

请务必阅读docs 关于将函数传递给组件的内容。您必须提供箭头函数，并在其中调用您的函数。或者直接使用useCallback钩子：

const Component = () => {
  const myFunction = useCallback(() => {
    // do something
  }, []);
  return <AnotherComponent coolFunction={myFunction} />
}

【讨论】：