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]);
}