如何在react js中正确迭代通过Wp Rest Api检索的post对象数组

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://example.com/wp-json/wp/v2/posts')
      .then(response => response.json())
      .then(data => setPosts(data))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title.rendered}</h2>
          <p>{post.content.rendered}</p>
        </div>
      ))}
    </div>
  );
};

export default MyComponent;