我有一个领域数据库同步了。该数据库包含具有类别和公司名称的多个产品。有些产品具有相同的公司名称,有些产品具有相同的类别名称,有些产品除了 id 之外的所有内容都相同。我需要做的是制作一个浏览组件,用户可以在其中浏览公司名称。我创建了一个自动完成搜索。搜索应自动完成公司名称显示屏幕中的产品类别。我现在面临的是自动完成搜索多次显示相同的公司名称(对于数据库中的每个产品)。此外,我只需要渲染一次具有相同名称的类别。
这是我的数据库架构:
import Realm from 'realm';
import axios from 'axios';
class Product extends Realm.Object {}
Product.schema = {
name: 'Product',
properties: {
cname: 'string',
pname: 'string',
id: 'int',
price: 'string',
code: 'string',
category: 'string',
},
primaryKey: 'id',
};
let getAllProducts = () => {
return realm.objects('Product');
};
export {getAllProducts}
浏览屏幕:
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" />;
export default function browse() {
const [value, setValue] = React.useState(null);
const [data, setData] = React.useState(getAllProducts());
const onSelect = index => {
setValue(data[index].cname);
};
const onChangeText = query => {
setValue(query);
setData(getAllProducts().filter(item => filter(item, query)));
};
const clearInput = () => {
setValue('');
setData(getAllProducts());
};
const renderOption = (item, index) => (
<AutocompleteItem key={index} title={item.cname} />
);
const renderCloseIcon = props => (
<TouchableWithoutFeedback onPress={clearInput}>
<Icon {...props} name="close" />
</TouchableWithoutFeedback>
);
useEffect(() => {
console.log('company selected:', value);
});
function CnameValue() {
return getAllProducts().filtered('cname == $0', value);
}
return (
<SafeAreaView>
<Autocomplete
placeholder="Type company name"
value={value}
accessoryRight={renderCloseIcon}
onChangeText={onChangeText}
onSelect={onSelect}>
{data.map(renderOption)}
</Autocomplete>
</SafeAreaView>
);
}