javascript - 内容内容显示为 json 对象，但无法获取值

Question

我创建了两条记录，contentful并试图在我的 React-hooks 网站中获取内容丰富的内容。但是我无法获取title, description, image, shortDescription字段下的值： JSON 对象内的级别。我如何迭代并从中获取值？有人可以建议我解决这个问题。

https://codesandbox.io/s/dark-glitter-9k30w

[
   {
      "sys":{
         "space":{
            "sys":{
               "type":"Link",
               "linkType":"Space",
               "id":"piw45a7gxkal"
            }
         },
         "id":"2L5jhZhtvUwuWe20kYM2vh",
         "type":"Entry",
         "createdAt":"2020-09-20T11:50:53.764Z",
         "updatedAt":"2020-09-20T11:50:53.764Z",
         "environment":{
            "sys":{
               "id":"master",
               "type":"Link",
               "linkType":"Environment"
            }
         },
         "revision":1,
         "contentType":{
            "sys":{
               "type":"Link",
               "linkType":"ContentType",
               "id":"course"
            }
         },
         "locale":"en-US"
      },
      "fields":{
         "title":"API testing using Postman",
         "slug":"api-testing-using-postman",
         "image":{
            "sys":{
               "type":"Link",
               "linkType":"Asset",
               "id":"6n41KgxfwWmmeCiSemIsK2"
            }
         },
         "shortDescription":"Cypress test to read a JSON file from Fixture folder.",
         "description":"Api testing using postman. This is useful for testers.\n\npm.test()\n\nApi testing using postman. This is useful for testers. \n",
         "duration":3,
         "skillLevel":"beginner",
         "lessons":[
            {
               "sys":{
                  "type":"Link",
                  "linkType":"Entry",
                  "id":"3op5VIqGZiwoe06c8IQIMO"
               }
            }
         ],
         "categories":[
            {
               "sys":{
                  "type":"Link",
                  "linkType":"Entry",
                  "id":"7JhDodrNmwmwGmQqiACW4"
               }
            }
         ]
      }
   },
   {
      "sys":{
         "space":{
            "sys":{
               "type":"Link",
               "linkType":"Space",
               "id":"piw45a7gxkal"
            }
         },
         "id":"1ePcCVp2VzehrXpcSaq6aM",
         "type":"Entry",
         "createdAt":"2020-09-20T08:43:44.388Z",
         "updatedAt":"2020-09-20T08:43:44.388Z",
         "environment":{
            "sys":{
               "id":"master",
               "type":"Link",
               "linkType":"Environment"
            }
         },
         "revision":1,
         "contentType":{
            "sys":{
               "type":"Link",
               "linkType":"ContentType",
               "id":"course"
            }
         },
         "locale":"en-US"
      },
      "fields":{
         "title":"Cypress test to read a JSON file",
         "slug":"cypress-test-to-read-a-json-file",
         "image":{
            "sys":{
               "type":"Link",
               "linkType":"Asset",
               "id":"6n41KgxfwWmmeCiSemIsK2"
            }
         },
         "shortDescription":"Cypress test to read a JSON file from Fixture folder.",
         "description":"\nThis cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. \n\n> cy.get()\n\nThis cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. This cy test is to read a JSON file from fixture folder. \n",
         "duration":3,
         "skillLevel":"beginner",
         "lessons":[
            {
               "sys":{
                  "type":"Link",
                  "linkType":"Entry",
                  "id":"3op5VIqGZiwoe06c8IQIMO"
               }
            }
         ],
         "categories":[
            {
               "sys":{
                  "type":"Link",
                  "linkType":"Entry",
                  "id":"7JhDodrNmwmwGmQqiACW4"
               }
            }
         ]
      }
   }
]

Home.js

const Home = () => {

const [blogArticles, setBlogArticles] = useState([]);

  useEffect(()=>{
        async function fetchData() {
            const entry = await client.getEntries();
            console.log(entry.items);
            setBlogArticles(entry.items);
             }
          fetchData();
    },[]);

return(

    <div className="container">
                        {
                            blogArticles.map(({ id, title, images, shortDescription, description}) => (
                                <div key={id} className="column-center">
                                   <article className="blogmaintile">
                                    <img className="blogImage" key={images} src={images} alt="myimage"</img> 
                                        <div className="blogtitle">
                                            <span key={title}>{title}</span>
                                        </div>
                                        <section>
                                    <p className="blogdescription" key={description}>{description}</p>
                                        </section>
                                        <section>
                                       <p className="blogdescription" key={shortDescription}>{shortDescription}</p>
                                        </section>

                                     
                                        <section className="col2">
                                            <a href="">Read more {'>'}{'>'}</a>
                                        </section>
                                    </article>
                                </div>
                            ))
                        }
                    </div>

  )
}
export default Home;

标签： javascriptjsonreact-hooks

Answer 1

你没有正确地破坏它，还有另一个你应该进入的对象级别，fields因为id它在“sys”对象内部，所以你必须先进入它。

//using Destructuring 

blogArticles.map(({ sys: { id }, fields: { title, image, shortDescription, description } }) => {
    console.log(id, title, image, shortDescription, description)
    //to get the image id do: image.sys.id
})

或者：

blogArticles.map(article => {

    const id = article.id
    const title = article.fields.title
    const image_id = article.fields.image.id
    const shortDescription = article.fields.shortDescription
    const descreption = article.fields.description
    console.log(id, title, image_id, shortDescription, descreption)
    
})

这是您只需将基本 url 添加到图像以便它们显示的结果