未捕获的 DOMException:无法在“历史"上执行“pushState":函数 () { [本机代码] } 无法克隆 [英] Uncaught DOMException: Failed to execute 'pushState' on 'History': function () { [native code] } could not be cloned

问题描述

我正在 Visual Studio 2017 提供的 reactjs 模板中创建一个小型 Web 应用程序.我遇到了一种情况，我希望将函数作为状态传递给子组件，然后通过子组件调用该函数.我有一个标题组件，其中有一个名为 setLogInTrue() 的方法，我想将其传递给我的 SignIn 组件.以下是我的代码:-

Header.tsx

class HeaderState {isLoggedIn:布尔值；}导出类 Header 扩展 React.Component{构造函数(){极好的()this.state = ({ isLoggedIn: false });this.setLogInTrue= this.setLogInTrue.bind(this);}setLogInTrue() {this.setState({ isLoggedIn: true });}公共渲染(){//一些元素<NavLink className="link header_row_link" to={{ pathname: '/signIn', state: this.setLogInTrue }}>//<-- 我认为这会起作用并在 SignIn 组件状态的位置提供该功能，但事实并非如此.登入</NavLink>}}

登录.tsx

export class SignIn extends React.Component, {}>{构造函数(){极好的();}公共渲染(){return 
<登录内容/>
;}}

我想在此处访问该函数并将其传递给 SignInContent 组件，然后从那里调用该函数.

这段代码没有给我任何编译时错误，但是每当我点击登录链接时，它都会给我以下错误

<块引用>

未捕获的 DOMException:无法在历史记录"上执行pushState":函数 () { [native code] } 无法克隆.

我试过这个 解决方案，但它对我不起作用.它仍然给我这个错误或给出未定义的状态.我对反应很陌生，任何帮助将不胜感激

解决方案

当 React 组件状态包含非序列化对象时，我遇到了同样的问题.

我只需要在将整个 React 状态对象推送到浏览器的历史状态之前将其字符串化，如下所示:

window.history.pushState(JSON.stringify(state), "", getSecuredURL(url));

I am creating a small web app in reactjs template provided by visual studio 2017. I am stuck in a situation where i want a function to be passed as a state to a child component and then invoke that function through child component. I have a header component where i have a method called setLogInTrue() which i want to pass to my SignIn component. Below is my code:-

Header.tsx

class HeaderState {
isLoggedIn: boolean;
}

export class Header extends React.Component<HeaderProps, HeaderState> {
constructor() {
    super()
    this.state = ({ isLoggedIn: false });
    this.setLogInTrue= this.setLogInTrue.bind(this);
}

setLogInTrue() {
    this.setState({ isLoggedIn: true });
}

public render(){
//Some elements
<NavLink className="link header_row_link" to={{ pathname: '/signIn', state: this.setLogInTrue }}> //<-- i thought this would work and give the function in the location of SignIn components state but it does not.
              Sign In
</NavLink>
  }
}

SignIn.tsx

export class SignIn extends React.Component<RouteComponentProps<{}>, {}>  {

constructor() {
    super();
}

public render() {
    return <div className="signin_wrapper">
        <SignInContent />
    </div>;
  }
}

I want to access that function here and pass it to SignInContent component, and then invoke that function from there.

This code does not give me any compile time errors but whenever i click on the sign in link it gives me the following error

Uncaught DOMException: Failed to execute 'pushState' on 'History': function () { [native code] } could not be cloned.

i tried this solution but it does not work for me. It still gives me this error or gives state as undefined. I am very new to react and any help would be appreciated

解决方案

I had the same issue when the React component state contained non serialized objects.

I just needed to stringify the whole React state object before pushing it to the browser's history state like this:

window.history.pushState(JSON.stringify(state), "", getSecuredURL(url));

这篇关于未捕获的 DOMException:无法在“历史"上执行“pushState":函数 () { [本机代码] } 无法克隆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！