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

Question

这个项目正在使用 NextJS

我有一个 URL 看起来像这样的页面

localhost:3000/first/second

我打电话 getInitialProps在那个页面上。数据getInitialProps按原样从组件传递给组件，我正在使用该数据设置初始状态，如下所示

localhost:3000/first/second

现在当我将用户发送到

localhost:3000/first/third

getInitialprops 应有的称呼。 data，这是组件的一个参数，总是用最新的结果填充，getInitialProps但state不是。它填充了其中的先前数据。当我进行客户端路由时，它不会重置。只有当我硬刷新页面时。

正如所建议的 NextJS GitHub我data.key = data.id，在```getInitialProps`` 中，这总是一个不同的数字来强制状态更新，但它不起作用。

任何信息都会有用。

感谢您的时间 ：）

Answer 1

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

从文档：

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

您需要useEffect同步状态：

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

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