React Native Popover组件anchor箭头函数无法访问FlatList的item参数

出现item为undefined的核心原因是形参命名引发的作用域遮蔽：
react-native-ui-kitten的Popover组件会自动给anchor属性绑定的回调函数传入内部计算锚点定位所需的引用对象，这个入参和你从FlatList渲染项解构得到的业务item没有任何关联。你在anchor箭头函数中将入参也命名为了item，根据JS作用域查找规则，这个函数内部命名的形参会优先覆盖外层PostRenderItem作用域内的业务item，最终你访问到的item.content是Popover传入的锚点引用对象上的属性——这个对象本身不包含业务item的content字段，自然就会拿到undefined。

只要消除形参的命名冲突即可，不需要额外手动把item透传进anchor函数（JS闭包会自动透传外层作用域的变量）：

• 将anchor回调的形参修改为和业务item不重名的变量（比如用anchorRef命名，专门用来接收Popover传入的锚点引用）
• 在anchor回调内部直接引用外层作用域的业务item即可

改完的可运行代码参考：

function PostRenderItem({ item }) {
  const [deleting, setDeleting] = useState(false);

  return (
    <Popover
      visible={deleting}
      // 重命名形参消除命名冲突
      anchor={(anchorRef) => {
        return (
          <Text>{item.content}</Text>
        )
      }}>
      <Button>Delete me!</Button>
    </Popover>
  )
}

• 不管是使用Popover还是其他带render prop/回调入参的第三方组件，给回调函数的形参起独立的、不和外层业务变量重名的名称，是最快避免作用域遮蔽问题的编码习惯。
• Popover传入anchor回调的anchorRef是用来绑定到锚点组件上、辅助定位弹出层的引用，不要随意丢弃这个参数，否则可能出现Popover定位偏移的问题。

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