当路由到具有不同参数的同一页面时，NextJS 初始状态不会更新

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 不是。它填充了其中的先前数据。当我进行客户端路由时，它没有重置。只有当我硬刷新页面时。

正如 NextJS GitHub 上的建议，我厌倦了在 ```getInitialProps`` 中添加 data.key = data.id，它始终是一个不同的数字来强制更新状态，但它不起作用。

任何信息都会有用。

感谢您的宝贵时间:)

Answer 1

使用 NextJS 时，getInitialProps 仅在页面首次呈现之前被调用。在随后的页面渲染（客户端路由）中，NextJS 在客户端执行它，但这意味着在页面渲染之前数据不可用。

来自docs：

For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a different route via the next/link component or by using next/router.

您需要 useEffect 来同步状态：

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

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

当路由到具有不同参数的同一页面时，NextJS 初始状态不会更新

NextJS initial state is not updating when routing to same page with different params

javascript

state

url-routing

reactjs

next.js