React TypeScript中props.history.push传state触发pushState克隆错误如何解决

• 浏览器原生History接口的pushState方法要求传入的state参数必须是可结构化克隆的纯数据，不允许包含函数、Symbol、DOM节点等不可序列化的内容。你遇到的错误提示中提到的transformRequest函数，就是axios响应对象内置的工具方法。
• 你代码中axios.post的回调参数是axios封装的完整响应对象，你直接将整个响应对象存入history.state，序列化时无法克隆对象内置的函数，因此触发了克隆失败错误。

你只需要取出axios响应中后端返回的纯数据字段data即可，修改你的请求回调代码：

await axios.post('http://localhost:4000/api/weatherData', {
  StationName: this.state.StationName,            
  StartDay: this.state.StartDay,
  EndDay: this.state.EndDay          
})
.then(res => { // 将参数名改为res避免和响应内的data字段混淆
  console.log('Props', this.props)          
  this.props.history.push({
    pathname: '/data',
    state: {
      data: res.data // 只取后端返回的纯数据，丢弃axios封装的完整响应对象
    }
  });  
})

• 不要向history.state中存入任何非纯JSON结构的数据，包括类实例、函数、React组件等
• 如果需要跨页面传递大量复杂数据，优先使用全局状态管理库（如Zustand、Redux），或者将数据序列化后存入sessionStorage/localStorage，避免占用history的存储配额

内容的提问来源于stack exchange，提问作者Hammad Ali