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

Question

我正在学习一门课程，但我遇到了无法引用/访问作为道具传递的对象实例的问题。 例如，让我们调用这个组件 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),
 words:"string of text"},
{
 winningNumber: 7,
 message: "Winning Number 7"}
]

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

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

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

请帮忙！

Answer 1

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

无论如何，尝试

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

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

小提示 #2：始终牢记您正在使用的结构： const array = [ date: new Date(...)] 没有任何意义。 我想你想要一个数组，所以：

常量 myArray = []

那么你想要其中的一个或多个对象，所以：

常量 myArray = [ { } ]

每个对象都有一个键和一个值，所以：

const myArray = [ { key: value, key2 : value2 等 } ]

里面想要更多的物品？ 然后去：

const myArray = [ {key: value}, { key2: value2}, ..., { keyn : valuen} ]

Answer 2

 function App() {
    const array = new Date(2020, 11, 23)
        
    return(
        <>
           <CalenderDate date={array} />
    )
  };

您为日期声明数据的方式不是在 javascript 中定义数据的正确方式，它看起来更像是在数组开头定义一个对象，而没有对象的花括号。