无法读取未定义的属性'params' - 无法获取产品 ID

Question

我试图从url获取产品id使用match.params.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>
)

}

UploadImages.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

Answer 1

加载组件时，params不是undefined。

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。

Answer 2

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