React Native中FlatList内TouchableOpacity绑定函数执行异常如何解决？

你的错误出在TouchableOpacity的onPress属性赋值逻辑上：
onPress要求传入函数引用作为点击触发的回调，而你当前写的onPress={chosenIcon(item.item.icon)}会在FlatList渲染每个子项时，直接同步调用chosenIcon函数，而非等待用户点击时才执行。
渲染阶段直接调用props.changeIcon会触发父组件状态更新，此时子组件还在渲染过程中，就会抛出Cannot update a component from inside the function body of a different component的警告，同时刚要打开的模态框也会被props.closeIconList(false)直接关闭，表现为模态框打开失败。

只需把onPress的赋值改为箭头函数包裹的形式，保证只有用户点击时才会执行chosenIcon逻辑即可：

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

这里的箭头函数只会在点击事件触发时才执行内部的chosenIcon调用，不会在组件渲染阶段提前执行，也就避免了渲染时跨组件更新状态的问题。你之前注释掉props.changeIcon、不传参数时功能正常，就是因为此时你给onPress传入的是chosenIcon函数本身的引用，不会在渲染阶段直接执行。

内容的提问来源于stack exchange，提问作者JSim