解析json文件reactjs

Question

我想知道如何解析這個json文件，然後渲染它？

[ 
    { 
    "userId": 1, 
    "id": 1, 
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", 
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" 
    }, 
    { 
    "userId": 1, 
    "id": 2, 
    "title": "qui est esse", 
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" 
    }, [...] 
] 

Answer 1

你不必「解析」上面的JSON，似乎。我只是粘貼它，並寫了下面的代碼，它的工作。所以我假設你想弄清楚如何使用React來渲染它。希望這有助於...

const posts= [ 
    { 
    "userId": 1, 
    "id": 1, 
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", 
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" 
    }, 
    { 
    "userId": 1, 
    "id": 2, 
    "title": "qui est esse", 
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla" 
    } 
]; 

const Posts = ({posts})=>(
    <div className="posts"> 
    <h1>Posts</h1> 
    {posts.map(post=> <Post post={post}/>)} 
    </div> 
); 

const Post = ({post})=>(
    <div className="post"> 
    <div>{post.userId}</div> 
    <div>{post.id}</div> 
    <div>{post.title}</div> 
    <div>{post.body}</div> 
    </div> 
);