Перейдите с помощью response-router-dom после использования setState на основе эффекта - PullRequest
Новая
       55

Перейдите с помощью response-router-dom после использования setState на основе эффекта

0 голосов
/ 29 апреля 2020

Я использую response-storage-hooks , который предоставляет способ получить глобальное состояние с помощью localStorage. Внутренне кажется, что вызов функции setValue ждет следующего рендера с использованием useEffect. Это проблема, потому что я хочу установить это значение локального хранилища и сразу программно перейти на другую страницу, используя реагирующий маршрутизатор-дом .

Вот упрощенный пример 

import React from 'react';
import { useHistory } from 'react-router-dom';
import { useStorageState } from 'react-storage-hooks';

export function Example() {
  const history = useHistory();

  // I'm ignoring writeError as it isn't relevant for this example
  const [value, setValue, writeError] = useStorageState<string>(
    localStorage,
    'test',
    'initial value'
  );

  return (
    <div>
      <p>Current Value: {value}</p>
      <button
        onClick={() => {
          // Set value to a new value 
          // This operation is delayed until the next render with useEffect internally
          setValue('new value');
          // Navigate to a different page after setting the value
          history.push('/');
        }}
      >
        Click Me
      </button>
    </div>
  );
}

Я думал о том, чтобы иметь дополнительную переменную useState с именем navigateOut, поэтому вместо прямого вызова history.push() я могу просто вызвать ее при следующем рендере с помощью вызова if (navigateOut) history.push();, но это выглядит немного беспорядочно.

Вероятно, было бы проще, если бы setValue имел какой-то API на основе обратного вызова / обещания, но, похоже, это не так. Поэтому я предполагаю, что мой вопрос заключается в том, каков идиоматический / основанный на ловушке подход к go по этому поводу?

РЕДАКТИРОВАТЬ: я понял, что забыл указать что-то в моем примере. Мне нужно различать простое изменение значения и изменение + навигация. Например, я должен иметь возможность устанавливать значение без перенаправления, если я не укажу это для этого.

1 Ответ

1 голос
/ 29 апреля 2020

setValue имеет своего рода обратный вызов, как упомянуто в ваших комментариях, добавляя эффект использования, который срабатывает только тогда, когда изменение значения решит ваши проблемы 

useEffect(() => {
history.push('/');
}, [value]); // This will only listen to changes on value

см. https://reactjs.org/docs/hooks-effect.html

...