React Native Expo：如何让点击的List.item仅触发对应函数，避免批量执行

1. 给列表项添加唯一Key #

React渲染列表时必须为每个元素指定唯一的key属性，否则React会复用组件实例，导致事件绑定混乱，出现点击一个按钮触发多个函数的情况。在你的代码中，给<List.Accordion>添加key={item.id}即可：

<List.Section title="User List" titleStyle={{ fontWeight: "bold" }}>
  {displayUser.length > 0 &&
    displayUser.map((item) => {
      return (
        <List.Accordion
          key={item.id} // 添加唯一key
          title={item.email}
          titleStyle={styles.userItem}
        >
          <List.Item
            title="Ban"
            left={(props) => (
              <MaterialCommunityIcons
                {...props}
                name="cancel"
                size="15"
              />
            )}
            titleStyle={styles.itemText}
            onPress={() => banUser(item.id)}
          />
        </List.Accordion>
      );
    })}
</List.Section>

2. 修正空数组判断逻辑 #

原代码中displayUser != []的判断是错误的——在JavaScript中，两个数组即使内容相同，引用不同也会返回true，导致空数组时依然进入渲染逻辑。改用displayUser.length > 0来判断数组是否有数据。

3. 检查banUser函数的定义 #

确保banUser函数正确接收id参数，且没有闭包变量捕获错误的问题。如果banUser是组件内部定义的函数，建议用useCallback包裹，避免每次渲染重新创建函数：

import { useCallback } from 'react';

// 组件内部
const banUser = useCallback((userId) => {
  // 此处编写封禁逻辑，确保只针对传入的userId操作
  console.log('封禁用户：', userId);
}, []);

这样就能保证点击某个用户的Ban按钮时，只会触发对应该用户ID的封禁操作。

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