Quiero hacer un índice alfabético para empresas y estoy luchando para eliminar el duplicado. Como abajo:
T Toy Store 1 Toy Store 2 Toy Store 3Así que corté la letra inicial de la empresa y quiero eliminarla si la letra ya se muestra a continuación:
T Toy Store 1 T // <- want to delete Toy Store 2 T // <- want to delete Toy Store 3 Intenté usar el new Set pero no funciona. También intenté usar indexOf y el método de filtro, pero tampoco funcionó. Agradezco cualquier ayuda.
Elemento de lista de ListItem
export default function CatListItem(props) { const {image,title,slicedInitial,onPress} = props; return ( <View> <Text> {slicedInitial} </Text> <Text> {title} </Text> </View> ); };Pantalla:
const renderList = () => { //does not work const indexedSlicedInitial=(item)=>{ const slicedInital=item.title.slice(0,1) const index = [...new Set(slicedInital)] return index } // return ( <View> { <Animated.FlatList data={data.list} key={"list"} keyExtractor={(item, index) => `list ${index}`} renderItem={({ item, index }) => ( <ListItem list title={item.title} slicedInitial={() => indexedSlicedInitial(item)} onPress={() => onProdDetail(item)} /> /> ); };Use el estado en el componente de pantalla para almacenar prevIndex para que pueda comparar cada vez que obtenga newIndex.
Si no son iguales, solo devuelve un nuevo índice; de lo contrario, devuelve una cadena vacía. En el componente ListItem, represente el texto solo si no es una cadena vacía.
Pantalla:
// use state to store prev value const [prevIndex, setPrevIndex] = useState('') const renderList = () => { const indexedSlicedInitial=(item)=>{ const slicedInital=item.title.slice(0,1) // if they are different then only return new index if(prevIndex !== slicedInitial) { setPrevIndex(slicedInitial) return slicedInitial } // if slicedInitial same as prevIndex return ""; } // no changes belowElemento de lista de componentes:
export default function CatListItem(props) { const {image,title,slicedInitial,onPress} = props; return ( <View> // only output slicedInitial if not empty {slicedInitial ? <Text> {slicedInitial} </Text> : null} <Text> {title} </Text> </View> ); };