Как организовать роутинг?

Question

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

      "categoryList" : {
          "All" : "/category/all",
          "News" : "/category/news",
          "Story" : "/category/story"
        }

Роутинг прописан вот такой :

            <Switch>
              <Route path="/category/:category" component={PostsList}/>
              <Route path="/post/:id" component={PostCard}/>
              <Route path="/" component={NewPost}/>
            </Switch>

Фильтрация постов по категориям происходит на сервере, т.е. при переходе на определенную категорию мне нужно запрашивать результат оттуда. Изначально я в самом компоненте PostsList запрашиваю посты с сервера в componentDidMount(), используя категорию, полученную из this.props.match.params.category, здесь всё работает как надо. При переходе по другим категориям мне нужно обновлять список постов, каким образом это лучше сделать?

Были попытки запроса постов в componentDidUpdate(), но выходила ошибка Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

Как я понял из вопроса, вы храните загруженные данные в локальном стейте компонента. Загружая данные в методе componentDidUpdate, вы снова вызываете setState, который снова вызывает componentDidUpdate. Поэтому, как одно из решений, можно добавить в componentDidUpdate условие того, что обновилась только категория перед загрузкой данных.

Но вместо использования componentDidMount я бы рекомендовал использовать useEffect. Это упростит код. Нужно лишь помнить, что компонент должен быть функциональным.

const PostsList = props => {
  const { category } = props.match.params;
  const [list, setState] = React.useState();

  React.useEffect(()=> {
    fetch(`/some/api?category=${category}`)
      .then(res=> res.json())
      .then(data=> setState(data));
  }, [category])

  return ...
}

БЛОГ НА HUSL

Как организовать роутинг?

Ответы (1 шт):