我正在做一个简单的react博客应用程序，它可以从https://jsonplaceholder.typicode.com/posts中呈现简单的帖子列表：

//...

function App() {
  const [posts, setPosts] = useState<IPost[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts`)
      .then((response) => {
        if (!response.ok) {
          throw new Error(
            `This is an HTTP error: The status is ${response.status}`
          );
        }
        return response.json();
      })
      .then((posts) => {
        setPosts(posts.filter((p: IPost) => p.id < 3));
        setError(null);
      })
      .catch((err) => {
        setError(err.message);
        setPosts([]);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  return (
    <div className="App">
      <PostsList posts={posts} />
    </div>
  );
}

export default App;

export interface IPost {
  id: number;
  title: string;
}

function PostsList({ posts }: { posts: Array<IPost> }) {
  const postData = posts === null ? [] : posts;
  const renderedPosts = postData.map((post) => <Post post={post} />);
  console.log("Render...");
  return <div className="flex flex-col">{renderedPosts}</div>;
}

function Post({ post }: { post: IPost }) {
  return (
    <div key={post.id} className="post my-4 p-6">
      <h2 className="text-2xl mb-4">{post.title}</h2>
    </div>
  );
}

它呈现良好。但在控制台我看到：

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `PostsList`. See https://reactjs.org/link/warning-keys for more information.
...

它渲染了PostsList几次。所有帖子ID都是唯一的。。所以，我可以弄清楚为什么我得到这个警告。有没有人告诉我我做错了什么？
我希望在没有警告的情况下进行渲染。