更新无限列表中的数据

Question

我有无限滚动的组件项列表。当它向下滚动并向列表中添加元素时，它不会用接收到的数据填充它们(数组中接收到新数据，但新添加的元素为空)

也许我需要以某种方式更新它们?它是相同的组件，当它添加新元素时它更新列表，为什么它不在新元素中更新数据?所有需要的数据也在接收数组中。

const MyItemsList: React.FC<ItemsListProps> = (props) => {
const [size, setSize] = useState(5)
const [type, setType] = useState('ALL')
const observer = useRef<IntersectionObserver>()
const { isLoading, content, hasMore } = useGetContent(size, type)
const lastItemRef = useCallback((node) => {
if (isLoading) return
if (observer.current) observer.current.disconnect() 

observer.current = new IntersectionObserver(entries => { 
if (entries[0].isIntersecting && hasMore) {
setSize(prevSize => prevSize + 1)
}
})
if (node) observer.current.observe(node) 
}, [isLoading, hasMore])
const itemsList = () => {
if (typeof (content) !== 'undefined') {
return content.map((item, index) => {
if (content.length === index + 1) {
return (
<li key={item.id} ref={lastItemRef}>
<ItemPreview item={item} />
</li>
)
}
return (
<li key={item.id}>
<ItemPreview item={item} />
</li>
)
})
}
return ( <div>Loading...</div> )
}
return ( <ul>{itemsList()}</ul> )
}
export default MyItemsList

& lt;ItemPreview/祝辞

interface ItemProps {
item: {
id: number,
title: string,
text: string,
},
}
const ItemPreview: React.FC<ItemProps> = (props) => {
const { item } = props;
return (
<>
<div>{item.title}</div>
<div>{item.text}</div>
</>
)
}
export default ItemPreview

有什么建议吗?

Answer 1

将itemList转换为如下所示的钩子

const itemsList = useMemo(() => {
if (typeof (content) !== 'undefined') {
return content.map((item, index) => {
if (content.length === index + 1) {
return (
<li key={item.id} ref={lastItemRef}>
<ItemPreview item={item} />
</li>
)
}
return (
<li key={item.id}>
<ItemPreview item={item} />
</li>
)
})
}
return []
}, [content, lastItemRef])

，然后不调用itemList()，只使用itemList并在呈现itemList

之前添加这样的检查来显示加载

if !itemList.length {
return ( <div>Loading...</div> )
}