React Native映射时如何仅渲染一次同名字段 去重展示企业名与分类

解决方案 #

核心通过Set数据结构对两个维度的字段做去重处理：自动补全的企业名称cname、选中企业后展示的分类名称category。

1. 企业名自动补全去重 #

新增去重工具函数，从产品列表中提取唯一的企业名称，避免重复选项：

// 从产品列表中提取唯一企业名称
const getUniqueCompanyNames = (productList) => {
  const nameSet = new Set(productList.map(product => product.cname));
  return Array.from(nameSet);
};

同步修改组件内的状态、事件处理逻辑：

• 初始化data时直接使用去重后的企业名数组
• 搜索过滤后先去重再更新data
• 选中、渲染逻辑同步适配数组类型变更

2. 产品分类去重 #

选中企业后提取分类时同样做去重处理，保证同名分类仅渲染一次：

// 获取选中企业的唯一分类列表
const getUniqueCategories = () => {
  if (!value) return [];
  const matchedProducts = getAllProducts().filtered('cname == $0', value);
  const categorySet = new Set(matchedProducts.map(product => product.category));
  return Array.from(categorySet);
};

修改后完整浏览页代码 #

import React, {useEffect, useState} from 'react';
import {
  StyleSheet,
  View,
  SafeAreaView,
  Text,
  FlatList,
  TouchableWithoutFeedback,
  Alert,
} from 'react-native';
import {Searchbar, RadioButton} from 'react-native-paper';
import {
  ApplicationProvider,
  Button,
  Icon,
  IconRegistry,
  Layout,
  Card,
} from '@ui-kitten/components';
import {EvaIconsPack} from '@ui-kitten/eva-icons';
import * as eva from '@eva-design/eva';
import {getAllProducts, addProduct, deleteAllProduct} from '../database/realm';
import {Autocomplete, AutocompleteItem} from '@ui-kitten/components';
import TextTicker from 'react-native-text-ticker';

const filter = (item, query) =>
  item.cname.toLowerCase().includes(query.toLowerCase());

const StarIcon = props => <Icon {...props} name="star" />;

// 从产品列表中提取唯一企业名称
const getUniqueCompanyNames = (productList) => {
  const nameSet = new Set(productList.map(product => product.cname));
  return Array.from(nameSet);
};

export default function browse() {
  const [value, setValue] = React.useState(null);
  // 初始化为去重后的企业名数组
  const [data, setData] = React.useState(getUniqueCompanyNames(getAllProducts()));
  
  const onSelect = index => {
    setValue(data[index]);
  };
  
  const onChangeText = query => {
    setValue(query);
    const filteredProducts = getAllProducts().filter(item => filter(item, query));
    // 过滤后先去重再更新数据
    setData(getUniqueCompanyNames(filteredProducts));
  };
  
  const clearInput = () => {
    setValue('');
    setData(getUniqueCompanyNames(getAllProducts()));
  };
  
  const renderOption = (cname, index) => (
    <AutocompleteItem key={index} title={cname} />
  );
  
  const renderCloseIcon = props => (
    <TouchableWithoutFeedback onPress={clearInput}>
      <Icon {...props} name="close" />
    </TouchableWithoutFeedback>
  );

  // 获取选中企业的唯一分类列表
  const getUniqueCategories = () => {
    if (!value) return [];
    const matchedProducts = getAllProducts().filtered('cname == $0', value);
    const categorySet = new Set(matchedProducts.map(product => product.category));
    return Array.from(categorySet);
  };

  useEffect(() => {
    console.log('company selected:', value);
    // 选中企业后可直接调用getUniqueCategories()拿到去重的分类列表渲染
  }, [value]);

  return (
    <SafeAreaView>
      <Autocomplete
        placeholder="Type company name"
        value={value}
        accessoryRight={renderCloseIcon}
        onChangeText={onChangeText}
        onSelect={onSelect}>
        {data.map(renderOption)}
      </Autocomplete>
      {/* 此处可遍历getUniqueCategories()返回的数组渲染分类 */}
    </SafeAreaView>
  );
}

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