本机反应-如何使用地图呈现动态列表

Question

我有一个要渲染的项目列表。当用户到达列表的底部时，它将加载更多项目。问题在于该页面是ScrollView，所以我不能使用FlatList来呈现它（您不能在ScrollView中使用ScrollView）。现在我用地图来做。

ItemsList.js：

export const ItemsList = (props) => {
    const { type, isEndReached } = props;
    const [items, setItems] = useState([]);
    const [page, setPage] = useState(1);

    useEffect(() => {
        if (!items.length || page > 1) {
           getItemsList(type);
        }
    }, [page, type]);

    useEffect(() => {
        if (isEndReached && isLoadMore) {
            setPage(page + 1);
        }
    }, [isEndReached]);

    const getItemsList = async (type) => {
        const loadedItems = await ItemService.getItems(page, type);
        setItems(_.concat(items, loadedItems));
    };

    const renderItem = (item, idx) => {
        return (
            <Item
                key={item.id}
            />
        )
    }

    const RenderList = () => {
        return items.length ? items.map((item, idx) => renderItem(item, idx)) : null;
    };

    render (
        <View>
            <RenderList/>
        </View>
    )
}

ItemsList组件位于ScrollView页面内。

当我加载更多结果时，我将状态中的项数组与服务器中的新数组合并在一起，并将新数组设置为项列表。这样可以重新渲染整个列表（即使每个项目都有不同的ID）。

我如何使列表仅显示其他项目，而不渲染整个列表？

谢谢！