Getting the error of cloning for react typescript and react router dom at props.history.push

Question

Without passing state to the props.history.push, its work very well but for data with state its give error.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';
//import { History } from 'history';
/* interface ChildComponentProps {
  history : History

 } */
/* interface HomeProps {
 history: RouteComponentProps["history"];
 location: RouteComponentProps['location'];
  match: RouteComponentProps['match'];
 } */

 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>
{/* <MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem> */}
</Select>
        {/* <TextField        
          required
          label="StationName"
          type="text"                
          value={this.state.StationName}              
          onChange={(event) => this.setState({              
            StationName: event.target.value                
          })}              
        />     */}        
        <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)

Answer 1

When using router state, that state needs to be clonable, but the axios response object (what you call data, though that's a misleading variable name) is not clonable, i'd guess because it contains functions.

I recommend you pick the values you need and create the state with those, not the entire response object. For example if you just need the response data:

onButtonClick = async (event: React.FormEvent) => {
  event.preventDefault();
  const response = await axios.post("http://localhost:4000/api/weatherData", {
    StationName: this.state.StationName,
    StartDay: this.state.StartDay,
    EndDay: this.state.EndDay,
  });
  this.props.history.push({
    pathname: "/data",
    state: {
      data: response.data,
    },
  });
};