當傳遞給反應中的功能組件時，Prop 是未定義的

Question

我正在嘗試在 LoadGridData 組件中包含 PrintGrid 功能組件。 PrintGrid 應該從 LoadGridData 接收 firebase 的 document_id。 但是在 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

您沒有傳遞道具對象，只是將 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)
}