React Native 中的 SectionList return 重复项

Question

我正在尝试像这样从数据库中获取行： ...

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");
},[]);

...

这是节数组：

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"}
];

这是部分组件：

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

这是节列表道具：

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

我检查 'Axios' 从 SQL 数据返回的数据是最新的，但该部分呈现并重复。

有什么帮助吗？

Answer 1

好的，我通过以下方式解决了它：

改变

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

至

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

React Native 中的 SectionList return 重复项

SectionList return duplicated items in react native

reactjs

react-native