无法访问作为道具传递的对象答案

【问题标题】：Can't access object passed as a prop无法访问作为道具传递的对象
【发布时间】：2022-06-23 00:01:01
【问题描述】：

我正在学习一门课程，但我遇到了无法引用/访问作为道具传递的对象实例的问题。例如，让我们调用这个组件 CalenderDate.js，在里面我有以下代码：

function CalenderDate(props) {
    return (
        <div className="date">
            <div>
                <div>{props.date.toLocaleString('en-US', { month: 'long' })}</div>
                <div>Date</div>
                <div>Year</div>
            </div> 
        </div>
    )
}

然后在 App.js 中我这样做：

function App() {
const array = [
date: new Date(2020, 11, 23)
]

return(
<>
<CalenderDate date = array.date[0]></CalenderDate>
</>
)
}

不知何故，在 CalenderDate.js 中，prop.date 变得未定义，现在，在我的反应页面上，控制台显示错误，

无法读取未定义的属性（读取 'toLocaleString'）

请帮忙！

【问题讨论】：

我觉得这行有问题const array = [date: new Date(...)]js中没有这样的数据结构。
检查控制台是否有错误，这不是用键定义数组的方法/
这能回答你的问题吗？ Best way to store a key=>value array in JavaScript?

标签： javascript reactjs

【解决方案1】：

您是否尝试过控制台记录您的道具，或者在调试时放置断点？这对你有很大帮助！

不管怎样，试试

<CalenderDate date ={array[0].date} />

小提示：请尽量避免使用关键字作为变量名，这会造成混淆且不可读。我会说：从 'array' 切换到 'dateProp' 或类似的东西。

【讨论】：