Next JS начальное состояние не обновляется при маршрутизации на ту же страницу с разными параметрами

Question

Этот проект использует NextJS

У меня есть страница, URL которой выглядит следующим образом

localhost:3000/first/second

Я звоню getInitialProps на этой странице. Данные передаются от getInitialProps к компоненту, как и должно быть, и я устанавливаю исходное состояние с этими данными, как это

const Index = ({ data }) => {
  const [state, setState] = useState(data.results)
}

Теперь, когда я отправляю пользователя на

localhost:3000/first/third

getInitialprops называется так, как должно быть. data, который является параметром компонента, всегда заполняется последними результатами из getInitialProps, а state - нет. Он заполнен предыдущими данными, которые были в нем. Это не сбрасывается, когда я делаю маршрутизацию на стороне клиента. Только когда я сильно перефразирую sh страницу.

Как и предлагалось на NextJS GitHub, я устал добавлять data.key = data.id в `` getInitialProps```, `это всегда другое число для принудительного обновления состояния, но это не работает.

Любая информация будет полезна.

Спасибо за ваше время :) 1027 *

Answer 1

При использовании Next JS, getInitialProps вызывается до того, как страница отображается только в первый раз. При последующем отображении страницы (маршрутизация на стороне клиента) Next JS выполняет его на клиенте, но это означает, что данные недоступны до отображения страницы.

Из документов :

Для начальной загрузки страницы getInitialProps будет запускаться только на сервере. Затем getInitialProps будет запускаться на клиенте при переходе на другой маршрут через компонент next / link или с помощью next / router.

Вам потребуется useEffect для синхронизации c состояние:

const Index = ({ data }) => {
  const [state, setState] = useState(data.results);

  useEffect(() => {
    setState(data.results);
  }, [data]);
}