Javascript 在下一个JS中访问JSON对象中的数据

我有一个包含另一个对象的对象。访问内部对象的属性无效

import React from 'react';
import Sidebar from "../../../components/Sidebar/Sidebar";
import {useRouter} from "next/router";

const News = (data:any) => {
    return (
        <>
            <div className="section section-main-page pt-0">
                <div className="container">
                    <div className="section section-panel">
                        <div className="section-panel-content">
                            <h1>{data.state.name}/{data.title}</h1>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default News;

export const getServerSideProps = async (context:any) =>{
    let data = await fetch(process.env.API_URL + '/' + context.query.state +'/news/' + 'test-news-article')
        .then( r => r.json() )
    console.log(data.state.name);
    return {props: {data}}
}

---

您正在返回

{props:{data}}

---

所以它必须是

props.data.state.name

将

const News=（data:any）

更改为

const News=（{data}:any）

修复了它。

显示了什么console.log？这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论-

{
    id: '1',
    title: 'Test News Article',
    summary: 'This is the summary',
    state: { id: '9', name: 'National'}
}