如何从获取的JSON对象获取值并在react中显示它

问题描述

我从wordpress 获取数据以做出反应。如果数据采用数组格式，则可以获取，显示内容并进行映射。但是当涉及到JSON对象时，我在显示想要的部分时遇到了问题，而且也无法映射它。

我的json对象简化= http：// myname / wp-json / wp / v2 / pages / 2

{
  "id": 2,"date": "","guid": {
    "rendered": ""
  },"content": {
    "rendered": "\n<p>Dit is een voorbeeldpagina. Gevestigd in Gotham City,XYZ heeft meer dan 2000 mensen in dienst en doen allemaal fantastische dingen voor de community in Gotham.</p>","protected": false
  },"_links": {
    "self": [
      {
        "href": "..."
      }
    ],"collection": [
      {
        "href": "..."
      }
    ]
  }
}

我的useFetch组件

export default function useFetch(url) {
    const [data,setData] = useState([]);
    useEffect(() => {
        async function loadData() {
            const response = await fetch(url);
            if(!response.ok) {
                // oups! something went wrong
                return;
            }
    
            const posts = await response.json();
            setData(posts);
        }
        
        loadData();
        
    },[url]);
    return data;

}

我要显示数据的组件

function Page(props) {

  const voorbeeldpagina = useFetch(
    "http://myname/wp-json/wp/v2/pages/2"
  );

  // const newArray = Object.entries(voorbeeldpagina)
  // I have also tried OBject.keys and Object.values 
  

return (
    <div>
      <h1>Page Component</h1>
      <div> {**I want to show `content.rendered` from my json object**} </div>
    </div>
  )
}

我想从我的json对象中显示content.rendered 有人可以帮忙吗？

谢谢！

解决方法

好吧，您正在尝试映射一个对象，可以使用object.keys来映射它们。

Object.keys(posts).map((key)=>return(  
 //your code goes here
 )

fetch json reactjs reactjs