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

Question

该项目正在使用NextJS

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

localhost:3000/first/second

我在该页面上致电getInitialProps。数据按原样从getInitialProps传递到组件，而我正在使用这种数据设置初始状态

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

现在，当我将用户重定向到

localhost:3000/first/third

getInitialprops会被调用。 data是component的参数，总是填充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]);
}