React Native onPress触发时返回所有API链接而非对应项链接的问题

问题描述 #

我开发一个对接CMS API的React Native页面，用于展示API返回的资源数据，每个资源包含Title、Content和不可见的Url。目前页面内容显示正常，但点击任意资源项时，控制台会输出所有资源的Url，私有浏览器可能打开任意链接，无法实现点击对应项打开对应URL的效果。

API数据结构示例 #

[{"Content": "Test. ", "Url": "https://instagram.com", "Title": "blah blah blah"}, 
{"Content": "Test2.", "Url": "https://google.com", "Title": "blah blah blah"}]

现有代码核心问题 #

1. 父组件的handleOpenSite函数通过map遍历所有资源，导致点击一次就触发所有URL的打开操作
2. 列表组件传递onPress时未携带当前项的URL，无法区分点击的具体资源
3. ResourceNavigationList组件内逻辑冗余，定义了未使用的handleOnPress函数，且重复调用openUrl

修复方案 #

1. 父组件代码修改 #

const { resourceData } = useResourceContent(binding);
const { openUrl } = useWebBrowser();

// 整理资源列表，保留url字段
const resourceList = resourceData?.Resources?.map((r, i) => ({
    id: i.toString(),
    title: r.Title,
    url: r.Url,
    content: r.Content,
}));

// 接收点击项的url作为参数，仅处理当前点击的资源
const handleOpenSite = (url) => {
    console.log(url);
    openUrl(url);
};

// 页面视图
return (
    <View>
        <ResourceNavigationList
            onPress={handleOpenSite}
            small
            listItems={resourceList}
            backgroundColor="transparent"
        />
    </View>
);

2. ResourceNavigationList组件修改 #

const ResourceNavigationList = ({
  listItems,
  backgroundColor,
  small,
  reverse,
  onPress,
}) => {
  const { ct } = useCountryTranslation();
  const colorScheme = useColorScheme();
  const bgColor = backgroundColor || Colors[colorScheme].altBackground;

  const renderItem = ({ item }) => {
    // 点击时传递当前项的url给父组件的处理函数
    const handleItemPress = () => {
      onPress(item.url);
    };

    return (
      <ResourceNavigationListItem
        key={item.id}
        reverse={reverse}
        small={small}
        item={item}
        onPress={handleItemPress}
      />
    );
  };

  return (
    <FlatList
      renderItem={renderItem}
      data={listItems}
      keyExtractor={(item) => item.id}
      style={{
        paddingVertical: 20,
        backgroundColor: bgColor,
      }}
    />
  );
};

ResourceNavigationList.propTypes = {
  listItems: PropTypes.array.isRequired,
  backgroundColor: PropTypes.string,
  small: PropTypes.bool,
  reverse: PropTypes.bool,
  onPress: PropTypes.func,
};

export default ResourceNavigationList;

3. ResourceNavigationListItem组件 #

现有代码无需修改，确保TouchableOpacity的onPress绑定正确即可。

关键修复说明 #

• 父组件的handleOpenSite改为接收单个URL参数，避免遍历所有资源导致的批量触发
• 列表项渲染时，将当前资源的URL通过点击事件传递给父组件，确保点击对应项仅触发对应URL的打开
• 清理组件内冗余逻辑，简化点击事件的传递链路

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