Блог

Главная - Вопросы по программированию - Передать функцию обратного вызова в качестве поддержки другому маршруту с помощью react-router

Передать функцию обратного вызова в качестве поддержки другому маршруту с помощью react-router

#reactjs #callback #react-router

#reactjs #обратный вызов #react-router

Вопрос:

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

 import { useHistory } from "react-router-dom";

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           state: { detail: 'some_value' }
       });
    };

};

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

мой код с обратным вызовом:

     const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           state: { my_callback: selectedPlaylist }
       });
    };

ошибка:

 DataCloneError: Failed to execute 'pushState' on 'History': selectedPlaylist => {
       ....
  }

Это просто то, что невозможно сделать, поскольку это ссылка на функцию, а не обязательно состояние? Есть ли обходной путь? Я не могу найти какие-либо ресурсы, подобные этому. Заранее спасибо!

Комментарии:

1. Какова логика передачи функции по состоянию маршрутизатора? Что делает функция?

2. обработчик событий привязан к компоненту кнопки onClick, а функция обратного вызова просто принимает список, и консоль регистрирует список, который он получает от второго компонента страницы

Ответ №1:

MDN говорит:

Объектом состояния может быть все, что можно сериализовать. Поскольку Firefox сохраняет объекты состояния на диск пользователя, чтобы их можно было восстановить после перезапуска браузера пользователем, мы накладываем ограничение на размер в 640 тыс. символов для сериализованного представления объекта состояния. Если вы передадите объект состояния, сериализованное представление которого больше, чем это, в pushState() , метод выдаст исключение. Если вам нужно больше места, рекомендуется использовать sessionStorage и / или localStorage .

A function не может быть клонирован или сериализован. То, что вы хотите сделать, лучше передать как props . Использование state object on history очень странно. Пример:

 function FirstPage() {
  // ...
  return (
    <>
      <Link to='/secondpage'>go to second page</Link>
      <Route
        path='/secondpage'
        render={() => <SecondPage myCallback={selectedPlaylist}}
      />
   </>
  );
}

Если вы подробнее расскажете о том, чего хотите достичь, вам будет легче помочь.