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)

CodePudding user response：

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,
    },
  });
};