无法读取未定义的属性“参数” - 无法获取产品 ID

Posted 2023-03-05

【中文标题】无法读取未定义的属性“参数” - 无法获取产品 ID

【英文标题】：Cannot read property 'params' of undefined - cannot get product id

【发布时间】：2021-11-13 14:01:17

【问题描述】：

我正在尝试使用 match.params.id 从 url 获取产品 ID 以传递给 api 调用，但它给出错误，匹配返回未定义是使用 match?.params?.id

Cannot read property 'params' of undefined

App.js

  <Router>
    <Switch>
       <Route path=process.env.PUBLIC_URL +"/images/upload/:id">
          <UploadImages />
       </Route>
    </Switch>
  </Router>

重定向：

 //params.id from material-ui datagrid table
  <LinkContainer to=`/admin-panel/home/images/upload/$params.id`> 
    <button className="btn btn-primary mr-2">Set Images</button>
  </LinkContainer>

    const columns = [
     field: '_id', headerName: 'ID', width: 250 ,
     field: 'name', headerName: 'Product Name', width: 300 ,
     field: 'price', headerName: 'Price', width: 130 ,
     field: 'countInStock', headerName: 'Count In Stock', width: 230 ,
     field: 'createdAt', headerName: 'Date Created', width: 230 ,
     
        field: 'action', 
        headerName: 'Action', 
        width: 350,
        renderCell: (params)=>
            return (
                <div>
                    <LinkContainer to=`/admin-panel/home/product/$params.id/edit`>
                        <button className="btn btn-info mr-2">Edit</button>
                    </LinkContainer>
                    <LinkContainer to=`/images/upload/$params.id`>
                        <button className="btn btn-primary mr-2">Set Images</button>
                    </LinkContainer>
                    <Button className="btn btn-danger" onClick=()=>deleteHandler(params.id) ><Delete /></Button>
                </div>
            )
        
    ,
];
return (
    <div className="productList" style=height:600 >

     

        loading ? (<Loader />) : error ? (<Message variant="danger" >error</Message>):(
            <DataGrid
            rows=products
            columns=columns
            pageSize=10
            rowsPerPageOptions=[5]
            checkboxSelection
        />
        )

        
        
    </div>
)

上传图片.js

function UploadImages( location, match, history ) 
   const productID = match.params.id

   return (<div></div>);
;

export default UploadImages

Id 在 URL 中传递

http://localhost:3000/images/upload/61555780c208142757be70v1

【参考方案1】：

最初加载组件时，params 未定义。 请这样做...

const productID = match && match.params && match.params.id;

你在上面做的是这样的： 您是在告诉 reactjs 仅在右侧进行健全性检查后为 productID 分配一个值。

此错误的线索：

Cannot read property 'params' of undefined

它告诉您您正试图从 undefined 变量（在本例中为 match）中选择一个名为 param 的 key。

所以上面的健全性检查意味着您告诉reactjs 仅在定义了match 时才尝试选择param；并且仅在定义了 param 时才尝试选择 id。

【讨论】：

谢谢，错误已解决，但productID的值为“undefined”

是的，因为这里传递的path <Route path=process.env.PUBLIC_URL +"/images/upload/:id"> 似乎是错误的。尝试将其更改为<Route path="/images/upload/:id">

仍然返回“未定义”

试试console.log(match)它返回什么？

匹配返回未定义

【参考方案2】：

写match?.params?.id是最快的解决办法

【讨论】：

谢谢，错误已解决，但返回“未定义”值

代码中有一些我看不到的东西。你在 app.js 中调用组件，但是你在哪里传递道具？我只是这么说，也许我没有看到它。

我正在从道具中获取匹配并尝试从中获取 id