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

我在

contentful

中创建了两条记录，并试图在我的web站点中获取contentful内容。但是，我无法获取JSON对象中fields:level下的

title、description、image、shortDescription

值。我如何迭代并从中获取值？有人能建议我解决这个问题吗

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;

const Home=（）=>{
const[blogArticles，setBlogArticles]=useState（[]）；
useffect（（）=>{
异步函数fetchData（）{
const entry=await client.getEntries（）；
console.log（entry.items）；
物品（条目、项目）；
}
fetchData（）；
},[]);
返回(
{
map（{id，title，images，shortDescription，description}）=>(
))
}
)
}
导出默认主页；

您没有正确地破坏它，还有另一个对象级别，您应该进入该级别，即

字段

，对于

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
})

或：

下面是结果，您只需要将基本url添加到图像中，这样它们就会显示出来

---

您没有正确地破坏它，还有另一个对象级别，您应该进入该级别，即

字段

，对于

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
})

或：

下面是结果，您只需要将基本url添加到图像中，这样它们就会显示出来

---

我可以知道如何在内部添加基本url吗？src=“{image.sys.id}取决于您在本地计算机上存储图像的位置，然后

/path to image.png

如果您从url获取图像，则需要图像的直接链接

网站\u url/id/{image.sys.id}.png

我必须查看网站链接，以便为您提供与您必须使用的url完全相同的url。抱歉，我没有将图像存储在我的本地计算机中…图像是从内容丰富的网站获取的。您从何处获取json文件？在contenful（）中创建了两个内容我正在本地的react hooks网站上加载这些。根据您的回答，我得到了标题、简短描述和描述，但没有收到图像。我可能知道如何在其中添加基本url？src=“{image.sys.id}取决于您在本地机器上存储图像的位置，然后

/path to image.png

如果您是从url获取它们，那么您需要图像

网站的直接链接\u url/id/{image.sys.id}.png

我必须查看网站链接，以便提供您必须使用的完全相同的url。抱歉，我没有将图像存储在我的本地计算机中…图像是从contentful站点获取的。您从何处获取json文件？contentful（）中创建了两个内容，我正在本地网站中加载这些内容。根据你的回答，我得到的标题，简短的描述和描述，但没有收到图像

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)
    
})