路由到具有不同参数的同一页面时，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：

对于初始页面加载，getInitialProps 将仅在服务器上运行。当通过 next/link 组件或使用 next/router 导航到不同的路由时，getInitialProps 将在客户端上运行。

您需要useEffect 来同步状态：

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

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