SectionList return duplicated items in react native

Question

i am trying to get rows from database like this: ...

const [recommendedItems,setRecommendedItems] = useState(null);
const [recommendedStores,setRecommendedStores] = useState(null);
const [allStores,setAllStores] = useState(null);

...

useEffect(()=>{
getOrderNowItems(setRecommendedItems,setItemsSupliers,"WHERE active = 1 AND recommended = 1 AND i_quantity > 0 ORDER BY id desc");
  getOrderNowStores(setRecommendedStores,"WHERE active = 1 AND recommended = 1 ORDER BY id desc");
  getOrderNowStores(setAllStores,"WHERE active = 1 AND recommended != 1 ORDER BY id desc");
},[]);

...

this is sections array:

const sections = [
    {title:t(trans.recommendedItems),data:recommendedItems && recommendedItems!=null?recommendedItems:[],color:"black",type:"items"},
    {title:t(trans.recommendedstores),data:(recommendedStores && recommendedStores!=null)?recommendedStores:[],color:"black",type:"stores"},
    {title:t(trans.stores),data:(allStores && allStores!=null)?allStores:[],color:"black",type:"stores"}
];

this is section component:

<SectionList 
    ListHeaderComponent={sectionListHeader}
    keyExtractor={keyExtractor2}
    sections={sections} 
    renderSectionHeader={renderSectionHeader2}
    renderItem={renderItems2} 
    extraData={[allStores,recommendedStores,recommendedItems]}
/>

and this is sectionlist props:

const keyExtractor2 = (index,item) => item.id;
  const renderSectionHeader2=({section})=> section.data.length > 0 && 
    <View>
        <Text>{section.title}</Text>
    </View>;
  
  const renderItems2 = ({index,item,section})=>{....}

I check the data returned from SQL data by 'Axios' is current, but the section render and duplicated.

any help, please?

Answer 1

ok i solved it by:

changing

const keyExtractor2 = (index,item) => item.id;

to

const keyExtractor2 = (index,item) => item+index;