在 props.history.push 获取 react typescript 和 react router dom 的克隆错误

Question

在不将状态传递给 props.history.push 的情况下，它的工作非常好，但对于状态为 error.DOMException 的数据：无法在 'History' 上执行 'pushState'：函数 transformRequest (data, headers) {normalizeHeaderName(headers, 'Accept');normalizeHeaderName(...... } 不能 cloned.at globalHistory.pushState。我收到以下错误：history.js:357 未捕获（承诺）我的代码是；

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

当使用路由器状态时，该状态需要是可克隆的，但是 axios 响应对象（你所说的 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,
    },
  });
};

在 props.history.push 获取 react typescript 和 react router dom 的克隆错误

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

reactjs

typescript

react-router

react-router-dom

react-component