Uncaught DOMException: не удалось выполнить «pushState» для «History»: функция () {[собственный код]} не может быть клонирована

Question

Я создаю небольшое веб-приложение в шаблоне activjs, предоставленном Visual Studio 2017. Я застрял в ситуации, когда хочу, чтобы функция передавалась как состояние дочернему компоненту, а затем вызывала эту функцию через дочерний компонент.У меня есть компонент заголовка, где у меня есть метод с именем setLogInTrue () , который я хочу передать моему компоненту SignIn.Ниже приведен мой код: -

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

Я хочу получить доступ к этой функции здесь и передать ее компоненту SignInContent,и затем вызовите эту функцию оттуда.

Этот код не дает мне никаких ошибок времени компиляции, но всякий раз, когда я нажимаю на ссылку входа, он дает мне следующую ошибку

Uncaught DOMException: Не удалось выполнить «pushState» для «History»: function () {[native code]} не удалось клонировать.

я попытался это решение, но оно не работаетдля меня.Это все еще дает мне эту ошибку или дает состояние как неопределенное.Я очень новичок, чтобы реагировать, и любая помощь будет оценена

Answer 1

Эта ошибка возникает, как упоминалось в комментарии @Andreas, когда элементы DOM или что-либо не сериализуемое используется в объекте состояния, которому присваивается window.history.state через history.replaceState или history.pushState.Например, попробуйте: history.pushState({node: document.body}, 'title', '#/error') или используйте {node: History} вместо этого, и он выдаст похожую ошибку DOMException.Чтобы исправить это, просто удалите проблемные объекты или каким-то образом обдумайте, что вводится в состояние.