When using props.history.push without passing state, everything works perfectly fine. However, when trying to pass data with state, an error occurs. The error message reads: DOMException: Failed to execute 'pushState' on 'History': function transformRequest(data, headers) {normalizeHeaderName(headers, 'Accept');normalizeHeaderName(...... } could not be cloned.at globalHistory.pushState. I am getting the following error: history.js:357 Uncaught (in promise) My Code is;
import axios from 'axios';
import React from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import Box from '@mui/material/Box';
import FormGroup from '@mui/material/FormGroup';
import Select from '@mui/material/Select';
interface WeatherDataCredentials {
StationName?: string,
StartDay?: string,
EndDay?: string
}
class SearchData extends React.Component<RouteComponentProps, WeatherDataCredentials> {
constructor(props: RouteComponentProps) {
super(props)
this.state = {
StationName: '',
StartDay: '',
EndDay: ''
}
}
onButtonClick = async (event: React.FormEvent) => {
event.preventDefault();
await axios.post('http://localhost:4000/api/weatherData',
{
StationName: this.state.StationName,
StartDay: this.state.StartDay,
EndDay: this.state.EndDay
})
.then(data => {
console.log('Props', this.props)
this.props.history.push({
pathname: '/data',
state:
{
data:data
}
});
}
)
}
render() {
return (
<Box
component="form"
sx={{
'& .MuiTextField-root': { m: 1, width: '25ch' },
}}
noValidate
autoComplete="off"
>
<div>
<h3>Weather Data Search</h3>
<FormGroup >
<InputLabel id="demo-simple-select-label">Station Name</InputLabel>
<Select
value={this.state.StationName}
label="Station Name"
onChange={(event) => this.setState({
StationName: event.target.value
})}
>
<MenuItem value="Buche">Buche</MenuItem>
</Select>
<TextField
required
label="StartDay"
type="text"
value={this.state.StartDay}
onChange={(event) => this.setState({
StartDay: event.target.value
})}
/>
<TextField
required
label="StartDay"
type="text"
value={this.state.EndDay}
onChange={(event) => this.setState({
EndDay: event.target.value
})}
/>
<Button onClick={this.onButtonClick} variant='contained' color='primary'>Search
Data</Button>
</FormGroup>
</div>
</Box>
)
}
}
export default withRouter(SearchData)