当我尝试使用useParams从url获取参数时，类组件中的无效钩子调用

Question

您知道如何使用useParams从类组件中的url获取参数吗?我得到了这个错误:钩子只能在函数组件的内部调用。我试着在这里添加serviceID。状态，但这也不起作用。

const AnyReactComponent = ({ text }) => <div>{<LocationOnIcon color="primary"/>}</div>;
class SimpleMap extends Component {
constructor(){
super();
this.state = {
resdate : new Date().toISOString().substr(0,10),
}
}
static defaultProps = {
center: {
lat: 59.95,
lng: 30.33
},
greatPlaceCoords: {lat:45.756659,
lng:21.228703},
zoom: 11,
};

handleReservation = async () => {
let params = useParams();
await axios({
method: 'post',
url: 'http://localhost:3001/reservation',
headers: {},
data: {
serviceID: params.serviceID,
userID: Cookies.get('userID'),
reservationDate: this.state.resdate
}
})}
render() {
return (
<div style={{ height: '50vh', width: '35%', justifyContent: 'flex-end' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'apiKey' }}
defaultCenter={ AnyReactComponent ? this.props.greatPlaceCoords: this.props.center}
defaultZoom={this.props.zoom}
lat={45.756659}
lng={21.228703}
>
<AnyReactComponent
{...this.props.greatPlaceCoords}
text= "{<LocationOnIcon/>} location"
/>
</GoogleMapReact>
<Button onClick={this.handleReservation} 
Make a reservation
</Button>
<Booking/>
</div>
);
}
}
export default SimpleMap;

Answer 1

您可以使用withRouter在组件中获取参数

import { withRouter } from "path/to/withRouter";
export default withRouter(SimpleMap);

并使用this.props.match.params获取参数:

const params = this.props.params;

更新:因为你正在使用react-routerv6，它不支持类。所以你应该在你的应用程序中创建一个withRouter:

withRouter.jsx:

export function withRouter( Child ) {
return ( props ) => {
const params = useParams();
const navigate = useNavigate();
return <Child { ...props } params ={ params } />;
}
}

您需要在constructor

中添加super(props)

constructor(props){
super(props);
this.state = {
resdate : new Date().toISOString().substr(0,10),
}
}

Answer 2

不能在类组件中使用钩子。如果必须这样做，可以定义一个包含钩子的包装器组件，然后将其作为prop传递:

export default (props) => {
const params = useParams();

return (
<SimpleMap {...props} params={params} />
);
}

Answer 3

add this

constructor(props){
super(props);
this.state = {
resdate : new Date().toISOString().substr(0,10),
}
this.handleReservation = this.handleReservation.bind(this);
}

那么你得到params

this.props.match.params