#javascript #json #react-hooks
#javascript #json #реагирующие крючки
Вопрос:
Я создал две записи 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.nnpm.test()nnApi 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. nn> cy.get()nnThis 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;
Ответ №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-адрес к изображению, чтобы они отображались
Комментарии:
1. Могу ли я узнать, как мы можем добавить базовый URL-адрес внутрь? src=» localhost:3000/» {image.sys.id }
2. Зависит от того, где у вас есть изображение, если оно хранится на вашем локальном компьютере, тогда
./path to image.png, если вы получаете их с URL-адреса, вам нужна прямая ссылка на изображениеwebsite_url/id/{image.sys.id}.png, я должен увидеть ссылку на веб-сайт, чтобы предоставить вам точно такой же URL-адрес, который вы должны использовать.3. Извините, я не сохраняю изображение на своем локальном компьютере… Изображение, получаемое с сайта, содержащего содержимое.
4. Откуда вы получаете этот файл json?
5. В contenful создано два содержимого ( contentful.com ) и я загружаю их на свой локальный веб-сайт react hooks. В соответствии с вашим ответом я получаю заголовок, краткое описание и описание, но изображение не получено