react Js - × 类型错误：无法读取未定义的属性(读取'params'

Question

这里我试图在我的web应用程序上编辑一个帖子TypeError:无法读取未定义的属性(读取'params')有人能指出这个错误吗?我在看教程。它工作得很好。但是在我的代码中它不起作用。我尝试导入useParams并使用它。但是它说useParams不能在类组件中使用。有人能指出错误或给我一个修复吗?

import React, {Component} from 'react';
import axios from 'axios';
import {Dropdown} from "react-bootstrap";
import {useParams} from "react-router-dom";

class Feed2 extends Component {
constructor(props){
super(props);
this.state={
vehicle:"",
plateNo:"",
owner:"",
manufacturer:"",
manufacturedYear:"",
color:""
}

}

takInput = (e) => {
const {name,value}= e.target;
this.setState({
...this.state,
[name]:value
})
}
register = (e) =>{
e.preventDefault();
const id = this.props.match.params.id;
const {plateNo,owner,manufacturer,manufacturedYear,color,vehicle} = this.state;
const data ={
plateNo:plateNo,
owner:owner,
manufacturer:manufacturer,
manufacturedYear:manufacturedYear,
color:color,
vehicle:vehicle
}
console.log(data);
axios.put(`http://localhost:8080/registrations/update/${id}`,data).then((res)=>{
if(res.data.success){
alert("Post Updated");
this.setState({
vehicle:"",
plateNo:"",
owner:"",
manufacturer:"",
manufacturedYear:"",
color:""
})
}
})
}
componentDidMount(){
const id = this.props.match.params.id;
axios.get(`/registrations/${id}`).then((res) =>{
if(res.data.success){
this.setState({
plateNo:res.data.registrations.plateNo,
owner:res.data.registrations.owner,
manufacturer:res.data.registrations.manufacturer,
manufacturedYear:res.data.registrations.manufacturedYear,
color:res.data.registration.color,
vehicle:res.data.registrations.vehicle
})
console.log(this.state.registrations)
}
})
}

render() {
return (
<div className="container">
<div className="register-box">
<div className="Top">
<div className="box">
<input placeholder="Enter the licence plate number "
className="input2" name="plateNo" value={this.state.plateNo} onChange={this.takInput} />
</div>
</div>
<div className="box">
<input placeholder="Enter the owners name "
className="input2" name="owner" value={this.state.owner} onChange={this.takInput} />
</div>
<div className="box">
<input placeholder=" Manufactured Year "
className="input2" name="manufacturedYear" value={this.state.manufacturedYear} onChange={this.takInput} />
</div>
<div className="box">
<input placeholder="Manufacturer"
className="input2" name="manufacturer" value={this.state.manufacturer} onChange={this.takInput} />
</div>
<div className="box">
<input placeholder="Color of the vehicle "
className="input2" name="color" value={this.state.color} onChange={this.takInput} />
</div>
<div className="box">
<input placeholder="Vehicle name "
className="input2" name="vehicle" value={this.state.vehicle} onChange={this.takInput} />
</div>
<Dropdown className="drop">
<Dropdown.Toggle variant="success" id="dropdown-basic">
Select Vehicle Type
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Car</Dropdown.Item>
<Dropdown.Item href="#/action-2">Van</Dropdown.Item>
<Dropdown.Item href="#/action-3">Bus</Dropdown.Item>
<Dropdown.Item href="#/action-3">Lorry</Dropdown.Item>
<Dropdown.Item href="#/action-3">Three-weeler</Dropdown.Item>
<Dropdown.Item href="#/action-3">Bike</Dropdown.Item>
<Dropdown.Item href="#/action-3">Other</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>

<div className="regbuttonContainer">
<button className="Button" onClick={this.register}>Register Vehicle</button>
</div>
</div>
</div>
);
}
}

export default Feed2;

Answer 1

我猜你需要用withouter HOC包装这个组件，就像这样

从'react-router-dom'中导入withRouter;