javascript - 在 react 中传递给功能组件时，属性未定义

我试图在我的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>}

最佳答案

您没有传递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)
}

关于javascript - 在 react 中传递给功能组件时，属性未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60122420/