react-intersection-observer 仅适用于最后一个元素

我正在尝试使用 构建延迟加载功能react-intersection-observer，目标是仅加载框中的图像（如果它们在视口中）。

• 目前，当我滚动到最后一个元素时 - 它会渲染出盒子的所有图像。
• 但是当我向上滚动并且最后一个框超出视口时，顶部的所有内容都会消失。
• 如果我打印出来inView，这会true在滚动到最后一个元素时转向，并false在最后一个元素离开视口时转向。

如何解决此问题，使其仅渲染出视口中的框？

演示图：

我的代码：

应用程序.js

export const AppContext = createContext();

function App() {
  const { ref, inView, entry } = useInView({
    rootMargin: "50px 0px",
    initialInView: true
    // triggerOnce: true,
  });

  return (
    <AppContext.Provider value={{ ref, inView, entry }}>
      <div className="App">
        <Posts />
      </div>
    </AppContext.Provider>
  );
}

export default App;

Post.js

import { useContext } from 'react'
import { AppContext } from '../App'

function Post({ post }) {
  const { ref, inView } = useContext(AppContext)
  return (
    <div className="post" ref={ref}>
      {inView ? 
        <img src={post.imgUrl} alt={post.title} className="post__img" loading="lazy" />
        : <div className="post__img" />
      }
      <h1 className="post__title">{post.title}</h1>
    </div>
  )
}

export default Post

更新：

我更新了下面的 Codesandbox 链接以移至useInView并Post.js删除 Context API。现在可以了！