服務器端呈現「React嘗試重複使用容器中的標記，但校驗和無效。」

在我的react-redux-aspnetcore Spa中，我啓用了服務器端渲染。不過，我正在使用基於舊的基於cookie的身份驗證。所以我沒有服務器端訪問需要身份驗證的API。服務器端呈現「React嘗試重複使用容器中的標記，但校驗和無效。」

這裏是我的行動的創建者：

export const actionCreators: AC = { 
    requestEntries: (weekStartDate: string): ActionCreator => (dispatch, getState) => { 
     // Only load data if it's something we don't already have (and are not already loading) 
     if (getState().activeUserEntries.date != weekStartDate && getState().activeUserEntries.isLoading == false) { 
      console.log('aa'); 

      let fetchTask = fetch(`/api/entries?date=${weekStartDate}`, { 
       credentials: 'same-origin' 
      }) 
       .then(response => response.json()) 
       .then((data: EntrySet) => { 
        dispatch(new ReceiveEntries(weekStartDate, data)); 
       }).catch((a)=>{ 
        dispatch(new InitEntriesState()); 
       }); 

      addTask(fetchTask); // Ensure server-side prerendering waits for this to complete 
      dispatch(new RequestEntries(weekStartDate)); 
     } 
    } 
};

正如你可以看到fetch方法.catch((a)=>{dispatch(new InitEntriesState());});一部分。它會在服務器端捕獲錯誤，因爲身份驗證失敗，並且由於視圖結果不是json字符串，因此會引發異常。

所以，如果身份驗證失敗，我派遣InitEntriesState()這使我的減速機返回商店的一部分的初始狀態。

最終，我得到的是魔鬼般的警告消息：

Warning: React attempted to reuse markup in a container but the checksum was invalid. 
This generally means that you are using server rendering and the markup generated 
on the server was not what the client was expecting. 
React injected new markup to compensate which works but you have lost many of the 
benefits of server rendering. Instead, figure out why the markup being generated 
is different on the client or server: 
    (client) v data-reactid="68">...Loading</div></di 
    (server) v data-reactid="68"><table class="table

那麼如何才能解決這個問題？還是應該改變我的方法來解決問題？如果是這樣，怎麼樣？

來源

2016-09-15 Hasan

如果我按照正確的問題，它聽起來像服務器呈現一個未經過身份驗證的頁面，然後當客戶端加載它時呈現經過身份驗證的頁面。那是對的嗎？您可以通過在瀏覽器中禁用js並查看服務器自己呈現的內容來測試此功能。

這個神祕的錯誤信息僅僅意味着服務器和客戶端沒有呈現完全相同的HTML，這意味着服務器端渲染的大部分性能優勢都會丟失。如果你真的無法讓服務器端渲染工作，並且你的應用程序的大部分在服務器渲染和客戶端渲染上看起來完全不同，那麼讓服務器返回一個加載狀態甚至不嘗試渲染反應申請。該警告只會以開發人員模式顯示，以警告您，它不會在生產中顯示。

來源

2016-09-15 06:24:48

沒錯。您認爲在單頁面應用程序中使用基於cookie的身份驗證狀態管理是錯誤的嗎？因爲我應用程序中的幾乎任何頁面都有需要我的身份驗證所需API數據的組件。 – Hasan

這會涉及到另一個問題，但客戶端請求將所需的cookie傳遞給您的服務器，所以您應該可以在服務器請求也成功的情況下獲得某些工作。再一次，這將是一個單獨的問題，如果你由於某種原因無法做到這一點，它可能只是從服務器返回一個微調器和在客戶端的身份驗證。我不知道你的商業用例，或者你爲什麼必須做服務器渲染。 –

服務器端呈現「React嘗試重複使用容器中的標記，但校驗和無效。」

回答

相關問題