У меня есть SectionList, который отображает список продуктов (с renderSectionHeader). Каждый заголовок имеет значок звездочки рядом с ним, и я хотел бы изменить порядок категорий на прессе этого значка звездочки. Например, если пользователь нажимает на автомобили и здания, я бы хотел, чтобы обе эти категории переместились наверх.
Это мой SectionList:
<SectionList
sections={this.state.products}
renderSectionHeader={({section}) => (
<TouchableOpacity onPress={()=>{this.sortFavorite(section.key)}}>
<Text>{section.key}</Text>
<FontAwesome name="star" color="grey" />
</TouchableOpacity>
)}
renderItem={({item,index}) => (
<Text>{item.name}<Text>
)}
/>
Сначала я создал массивсохранить / удалить избранные категории onPress:
sortFavorite = (currentCategory) => {
let items = this.state.products
let favouriteCategories = this.state.favouriteCategories
let index = favouriteCategories.indexOf(currentCategory)
if(index === -1){
for(let i =0; i < items.length; i++){
if(items[i].key === currentCategory){
favouriteCategories.push(
items[i].key
)
}
}
}
else {
favouriteCategories.splice(index, 1);
}
this.setState({favouriteCategories: favouriteCategories},()=>{
// move to top of array
const sortedCategories = _.sortBy(items, (item) => {
const index = favouriteCategories.indexOf(item.key)
return index == -1 ? items.length : index
})
})
}
Как сравнить мой массив товаров с моими любимыми категориями и переупорядочить массив товаров?
Это мой массивиз продуктов выглядит так:
0: {key: "Fruits", data: Array(1)}
1: {key: "Cars", data: Array(10)}
2: {key: "Buildings", data: Array(4)}
Вот так выглядит мой массив избранных категорий:
["Cars","Buldings"]
Я с радостью использую lodash, если есть способ сделать это сэто.