如何在 React Native 的平面列表中的可触摸不透明度内执行函数？

Question

我的平面列表中的每个项目都是一个可触摸的不透明度（一个图标）。我想要一个在点击图标时执行的功能。此函数已作为 prop 从父组件传递，我将图标数据传递到该 prop。我认为这将是直截了当的。但是，当我点击图标打开包含我的平面列表的模态时，模态不会打开并且我收到警告：'Cannot update a component from inside the function body of a different component.' 我很困惑，因为我正在执行一个已传递为来自我父组件的道具。我不确定我还应该怎么做？

这是我想在点击时调用的函数（changeIcon 属性是导致问题的原因）：

function chosenIcon(selectedIcon) {
  props.changeIcon(selectedIcon);
  props.closeIconList(false);
}

这是FlatList，它似乎不喜欢我通过item.item.icon。

<FlatList
  numColumns={3}
  data={ICONS}
  renderItem={(item) => (
    <TouchableOpacity style={styles.item} onPress={chosenIcon(item.item.icon)}>
      <Text style={styles.text}>{item.item.icon}</Text>
    </TouchableOpacity>
  )}
/>

如果我注释掉函数中的 props.changeIcon 行并且不传递数据 item.item.icon，一切正常，当我 select 一个图标时模式关闭。

我希望你说得够清楚了！谢谢！

Answer 1

请尝试在 TouchableOpacity onPress 回调中添加粗箭头功能。

 <FlatList 
    numColumns = {3}
    data = {ICONS}
    renderItem = {item => (
      <TouchableOpacity style = {styles.item} onPress= {()=> chosenIcon(item.item.icon)}> // add ()=>
         <Text style = {styles.text}>{item.item.icon}</Text>
      </TouchableOpacity>
    )}
  />

如何在 React Native 的平面列表中的可触摸不透明度内执行函数？

How do I execute a function within a touchable opacity within a flatlist in React Native?

reactjs

react-native

components

react-native-flatlist