admin管理员组文章数量:1279242
So I'm creating a dashboard so users can edit records and things like that.
I have created edit and delete buttons and they go to the respective routes.
However, I get the following on the edit ponent
TypeError: this.props.match is undefined
Here is my edit file
import React, { Component } from "react";
import axios from "axios";
import swal from "sweetalert";
import AuthService from "../../Auth/AuthService";
import withAuth from "../../Auth/withAuth";
const Auth = new AuthService();
class Edit extends Component {
constructor(props) {
super(props);
this.state = {
collection: {},
categorys: []
};
}
ponentDidMount() {
const collectionId = this.props.match.params.id;
axios
.get("/api/collections/" + collectionId)
.then(result => {
this.setState({ collection: result.data });
})
.catch(error => {
console.log(error);
});
axios
.get("/api/category")
.then(res => this.setState({ categorys: res.data }))
.catch(error => {
console.log(error);
});
}
onChange = e => {
const state = this.state.collection;
state[e.target.name] = e.target.value;
this.setState({ collection: state });
};
onSubmit = e => {
e.preventDefault();
const collectionId = this.props.match.params.id;
const {
title,
description,
reference,
images,
price,
year,
category
} = this.state.collection;
let config = {
headers: { Authorization: "bearer " + Auth.getToken() }
};
let body = {
title,
description,
reference,
images,
price,
year,
category
};
axios
.put("/api/collections/" + collectionId, body, config)
.then(result => {
this.props.history.push("/collections/" + collectionId);
})
.catch(error => {
swal({
title: "Error",
text: `${error}`,
icon: "error",
button: "Try again"
});
});
};
render() {
return (
<>
<div className='block md:flex md:flex-column h-full'>
<div className='p-12 w-full text-center text-gray-800'>
<h1 className='title mb-10'>Edit A collection</h1>
<form className='w-full m-auto max-w-lg' onSubmit={this.onSubmit}>
<div className='flex flex-wrap mb-4'>
<label htmlFor='title'>Title:</label>
<input
type='text'
name='title'
value={this.state.collection.title}
onChange={this.onChange}
placeholder='Title'
/>
</div>
<div className='flex flex-wrap'>
<label htmlFor='description'>Description:</label>
<textarea
type='text'
name='description'
className='h-64'
value={this.state.collection.description}
onChange={this.onChange}
placeholder='Content'
></textarea>
</div>
<div className='flex flex-wrap mb-4'>
<label htmlFor='reference'>Reference:</label>
<input
type='text'
name='reference'
value={this.state.collection.reference}
onChange={this.onChange}
placeholder='reference'
/>
</div>
<div className='flex flex-wrap mb-4'>
<label htmlFor='description'>images:</label>
<input
type='file'
multiple
name='content'
value={this.state.images}
onChange={this.onChange}
></input>
</div>
<div className='flex flex-wrap mb-4'>
<label htmlFor='price'>Price:</label>
<input
type='number'
name='price'
value={this.state.collection.price}
onChange={this.onChange}
placeholder='price'
/>
</div>
<div className='flex flex-wrap mb-4'>
<label htmlFor='year'>Year:</label>
<input
type='number'
name='year'
value={this.state.collection.year}
onChange={this.onChange}
placeholder='Year'
/>
</div>
<div className='flex flex-col mb-2'>
<label htmlFor='category'>Category</label>
<div className='relative'>
<select
id='category'
value={this.state.collection.category}
onChange={this.onChange}
>
<option>N/A</option>
{this.state.categorys.map(category => (
<option key={category._id} value={category.name}>
{category.name}
</option>
))}
</select>
<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2'>
<svg
className='fill-current h-4 w-4'
xmlns=''
viewBox='0 0 20 20'
>
<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
</svg>
</div>
</div>
</div>
<div className='flex'>
<button type='submit' className='btn w-full'>
Submit
</button>
</div>
</form>
</div>
</div>
</>
);
}
}
export default withAuth(Edit);
If I hover over the edit link in the dashboard the ID is shown, however, on the edit pages it seems to have issues finding the ID of the collection.
So I'm creating a dashboard so users can edit records and things like that.
I have created edit and delete buttons and they go to the respective routes.
However, I get the following on the edit ponent
TypeError: this.props.match is undefined
Here is my edit file
import React, { Component } from "react";
import axios from "axios";
import swal from "sweetalert";
import AuthService from "../../Auth/AuthService";
import withAuth from "../../Auth/withAuth";
const Auth = new AuthService();
class Edit extends Component {
constructor(props) {
super(props);
this.state = {
collection: {},
categorys: []
};
}
ponentDidMount() {
const collectionId = this.props.match.params.id;
axios
.get("/api/collections/" + collectionId)
.then(result => {
this.setState({ collection: result.data });
})
.catch(error => {
console.log(error);
});
axios
.get("/api/category")
.then(res => this.setState({ categorys: res.data }))
.catch(error => {
console.log(error);
});
}
onChange = e => {
const state = this.state.collection;
state[e.target.name] = e.target.value;
this.setState({ collection: state });
};
onSubmit = e => {
e.preventDefault();
const collectionId = this.props.match.params.id;
const {
title,
description,
reference,
images,
price,
year,
category
} = this.state.collection;
let config = {
headers: { Authorization: "bearer " + Auth.getToken() }
};
let body = {
title,
description,
reference,
images,
price,
year,
category
};
axios
.put("/api/collections/" + collectionId, body, config)
.then(result => {
this.props.history.push("/collections/" + collectionId);
})
.catch(error => {
swal({
title: "Error",
text: `${error}`,
icon: "error",
button: "Try again"
});
});
};
render() {
return (
<>
<div className='block md:flex md:flex-column h-full'>
<div className='p-12 w-full text-center text-gray-800'>
<h1 className='title mb-10'>Edit A collection</h1>
<form className='w-full m-auto max-w-lg' onSubmit={this.onSubmit}>
<div className='flex flex-wrap mb-4'>
<label htmlFor='title'>Title:</label>
<input
type='text'
name='title'
value={this.state.collection.title}
onChange={this.onChange}
placeholder='Title'
/>
</div>
<div className='flex flex-wrap'>
<label htmlFor='description'>Description:</label>
<textarea
type='text'
name='description'
className='h-64'
value={this.state.collection.description}
onChange={this.onChange}
placeholder='Content'
></textarea>
</div>
<div className='flex flex-wrap mb-4'>
<label htmlFor='reference'>Reference:</label>
<input
type='text'
name='reference'
value={this.state.collection.reference}
onChange={this.onChange}
placeholder='reference'
/>
</div>
<div className='flex flex-wrap mb-4'>
<label htmlFor='description'>images:</label>
<input
type='file'
multiple
name='content'
value={this.state.images}
onChange={this.onChange}
></input>
</div>
<div className='flex flex-wrap mb-4'>
<label htmlFor='price'>Price:</label>
<input
type='number'
name='price'
value={this.state.collection.price}
onChange={this.onChange}
placeholder='price'
/>
</div>
<div className='flex flex-wrap mb-4'>
<label htmlFor='year'>Year:</label>
<input
type='number'
name='year'
value={this.state.collection.year}
onChange={this.onChange}
placeholder='Year'
/>
</div>
<div className='flex flex-col mb-2'>
<label htmlFor='category'>Category</label>
<div className='relative'>
<select
id='category'
value={this.state.collection.category}
onChange={this.onChange}
>
<option>N/A</option>
{this.state.categorys.map(category => (
<option key={category._id} value={category.name}>
{category.name}
</option>
))}
</select>
<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2'>
<svg
className='fill-current h-4 w-4'
xmlns='http://www.w3/2000/svg'
viewBox='0 0 20 20'
>
<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
</svg>
</div>
</div>
</div>
<div className='flex'>
<button type='submit' className='btn w-full'>
Submit
</button>
</div>
</form>
</div>
</div>
</>
);
}
}
export default withAuth(Edit);
If I hover over the edit link in the dashboard the ID is shown, however, on the edit pages it seems to have issues finding the ID of the collection.
Share Improve this question asked Nov 6, 2019 at 15:08 user8331511user8331511 1- 1 can you post code of App.js (where you defined your routes) – iLiA Commented Nov 6, 2019 at 15:11
3 Answers
Reset to default 9It's not having issues finding the id but the match object. Components that aren't a direct child of a route need to use the withRouter hoc to access the match object:
export default withRouter(withAuth(Edit));
if you are on react-router-dom ^5.1.1 then you could use the useParams hook instead of the withROuter HOC pointed out above. The hook can be used like so.
import {useParams} from "react-router-dom"
const {id} = useParams()
we can easily fix this by adding following lines, first we need to import withRouter
import { withRouter } from "react-router";
and use
export default withRouter(yourpage);
this worked for me
本文标签： javascriptTypeError thispropsmatch is undefined in componentStack Overflow
版权声明：本文标题：javascript - TypeError: this.props.match is undefined in component - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741213369a2359569.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论