Как повторно отобразить компонент при изменении URL - PullRequest
Новая
       92

Как повторно отобразить компонент при изменении URL

1 голос
/ 08 мая 2020

В компоненте GroupInfo моего приложения есть useEffect, который должен срабатывать при изменении совпадения из props. Но это не так. Код useEffect выглядит следующим образом. 

useEffect
(
    () =>
    {
        try
        {
            const runEffect = async () =>
            {
                const _id = match.params.id;
                const response = await api.get
                (
                    "/groupidindex",
                    {
                        params:
                        {
                            _id
                        }
                    }
                );
                setGroup (response.data);
            }
            runEffect();
        }
        catch (error)
        {
            throw new Error (error);
        }
    },
    [match]
)

А фрагмент кода, в котором установлена ​​ссылка, следующий: 

<Link key = {index} to = {match.url.concat ("/"+group._id)}>

Объявление компонента в приложении. Файл js выглядит следующим образом. 

<Route path = "/groups/:id/:id" component = {GroupInfo}/>

Компонент GroupInfo не выполняет визуализацию, если путь соответствует требованиям, и не выполняет повторную визуализацию при изменении пути. Однако он отображает / повторно отображает, когда я перезагружаю страницу. Я использовал useEffect, который раньше менялся при изменении URL-адреса, в другом компоненте того же приложения, и он работал нормально.

1 Ответ

0 голосов
/ 08 мая 2020

Вы уверены, что объект match изменился или только некоторые его свойства?

Кроме того, ваш try...catch блок бесполезен. В этом коде никогда не может быть ошибки, которую он мог бы перехватить.

const runEffect = async () => {...} может вызвать синтаксическую ошибку, но не ошибка времени выполнения, которую может обработать try..catch. И runEffect() может вернуть отклоненное обещание, но ваш try..catch тоже не справится с этим. если только вы await runEffect().

и я считаю бессмысленным повторять throw new Error(error); внутри цепочки Promise, все это приведет к записи ошибки Uncaught (in promise) ... в консоли.

Я попытался заменить «[match]» на «[match.url]» в useEffect, и ничего не изменилось.

Простите, я не знаю об этом; может быть, здесь уже слишком поздно. Но в конечном итоге вас заботит только id-param, не так ли?

Я бы написал это так: 

// you can put these outside the component itself as 
// they don't rely on anything but the passed arguments:
const getGroup = async (_id) => {
  const response = await api.get("/groupidindex", {
    params: {
      _id
    }
  });

  return response.data;
}

const logError = error => {
  console.error(error) 
};

// in the component
useEffect(() => {
  getGroup(match.params.id).then(setGroup).catch(logError);
}, [match.params.id])

Теперь, что касается попытки ... catch, я использовал его там из-за предупреждающего сообщения в серверной части приложения. Сообщение было: "UnhandledPromiseRejectionWarning: необработанное отклонение обещания.

Если вас не волнует ошибка и вы просто не хотите получать сообщение об ошибке, вы можете .catch() ошибку с function noop(){}.

...