当传递给反应中的功能组件时，Prop 是未定义的

Question

我正在尝试在我的LoadGridData组件中包含PrintGrid功能组件。PrintGrid 应该从 LoadGridData 接收document_id firebase。但是在 LoadGridData 的 return 语句中，我尝试将grid_data列表中的grid_id传递给 PrintGrid，它会导致grid_id值未定义。

function PrintGrid(grid_id) {
console.log('Print grid_id in PrintGrid: ', grid_id);

下面给出了一个错误，它无法访问未定义的索引 0。

{grid_data && <PrintGrid grid_id={grid_data[0]} />}

仅使用以下语句，它将 grid_data[0] 值 (grid_id( 更新到网页。

{grid_data && <p> {grid_data[0]} </p>}

Answer 1

你没有传递 props 对象，而只是将grid_id直接传递给 PrintGrind 函数

改变

function PrintGrid(grid_id) {

自

function PrintGrid({grid_id}) {  

以上是 ES6 解构对象并直接获取字段的方式。

您也可以只做PrintGrid(props(并在函数内部访问props.grid_id

function PrintGrid(props) {  
console.log(props.grid_id)
}