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

【问题标题】：Cannot read property 'params' of undefined - cannot get product id无法读取未定义的属性“参数” - 无法获取产品 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

【问题讨论】：

标签： javascript html reactjs react-router

【解决方案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