NextJS 初始 state 在使用不同参数路由到同一页面时未更新

Question

这个项目正在使用NextJS

我有一个页面，其中 URL 看起来像这样

localhost:3000/first/second

我在该页面上调用getInitialProps 。 数据按原样从getInitialProps传递到组件，我正在使用这样的数据设置初始 state

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

现在，当我将用户发送到

localhost:3000/first/third

getInitialprops被调用，因为它应该是。 data是组件的一个参数，始终填充来自getInitialProps的最新结果，但state不是。 它填充了其中的先前数据。 当我进行客户端路由时，它不会重置。 只有当我硬刷新页面时。

正如NextJS GitHub所建议的那样，我厌倦了在“getInitialProps”中添加data.key = data.id ，这总是一个不同的数字来强制 state 更新，但它不起作用。

任何信息都会很有用。

感谢您的时间：）

Answer 1

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

从文档：

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

您需要一个useEffect来同步 state：

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

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