Реагируют бесконечные л oop на 404 - PullRequest
Новая
       15

Реагируют бесконечные л oop на 404

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

Я прорабатываю курс Удеми по реакции, и сталкиваюсь со странной проблемой, когда возникает проблема, когда я пытаюсь загрузить действие, которое не существует, если я делаю это через URL (это потому, что наш Пользовательский интерфейс явно не будет отображать недействительные действия). Я действительно проверил, что мой useEffect правильно определяет свои зависимости, чтобы не вызывать бесконечность l oop, как это обычно бывает: 

useEffect(() => {
      console.log("Params id: ", match.params.id);
      loadActivity(match.params.id)
    }, [loadActivity, match.params.id, history])

Где рассматриваемый компонент имеет следующую подпись const ActivityDetails : React.FC<RouteComponentProps<DetailParams>> Когда я просматриваю журналы консоли, я вижу, что этот эффект использования постоянно срабатывает, что интересно, так же как и его рендеринг (в пределах одного и того же компонента) для того, что происходит, когда у него нет активности для возврата 

if(!activity) {
  console.log("not activity");
  return <h2>Not Found</h2>
}

Путь к нему определяется в родительском контейнере следующим образом: 

 <Route key={location.key} path={['/createActivity', '/manage/:id']}

Действие MobX определяется следующим образом: 

@action loadActivity = async (id: string) => {
    let activity = this.getActivity(id);
    console.log("activity is: ", activity);
    if (activity !== undefined) {
      this.activity = activity;
    } else {
      console.log("activity is undefined");
      this.loadingInitial = true;
      try {
        activity = await agent.Activities.details(id);
        console.log("after wait, acitivty is:", activity);
        runInAction('getting activity',() => {
          console.log("Now i am running the next run in action");
          this.activity = activity;
          this.loadingInitial = false;
        })
      } catch (error) {
        runInAction('get activity error', () => {
          this.loadingInitial = false;
        })
        console.log("Error Is: ", error);
      }
    }
  }

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

const responseBody = (response: AxiosResponse ) => response.data;
const requests = {
    get : (url: string) => axios.get(url).then(responseBody),
    ...
}

const Activities = {
    details: (id: string) => requests.get(`/activities/detail/${id}`),
    ...
}

Что именно я делаю не так?

Редактировать: я не уверен, является ли это частью жизненного цикла реакции, но похоже, что когда я переосмыкаю sh эту страницу, рендер if (! Activity) запускается, но, конечно, мы не не вижу его, поскольку он быстро находит действие для рендеринга. Насколько я понимаю, useEffect состоит в том, что сначала он должен срабатывать до монтирования компонента, определять там состояния, а затем продолжаться жизненный цикл?

1 Ответ

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

Хорошо, все еще не уверены, почему, но перемещение кода, который загружает начальные действия из файла Activity.tsx (он же общий родительский элемент) в код Dashboard (который также определен здесь как Route exact path='/activities' component={ActivityDashboard}/>, похоже, исправляет проблема.

Может кто-нибудь объяснить, почему? Это проблема с путями? У меня сложилось впечатление, что использование ключевого слова exact сработает только в том случае, если путь будет точно соответствовать

...