React服務器端渲染後端請求

我有一個React應用服務器端通過Express渲染。我有簡單的應用程序組件：React服務器端渲染後端請求

import React, { Component } from 'react'; 

export default class App extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     data: [] 
    }; 

    fetch('http://backend', { 
     mode: 'cors', 
    }) 
     .then(res => res.json()) 
     .then(data => this.state.data); 
    } 

    render() { 
    return (
     <ul> 
     {this.state.data.map(item => (
      <li key={item}>{item}</li> 
     ))} 
     </ul> 
    ); 
    } 
};

問題（或更多可能的功能）是提取工作異步。因此，瀏覽器獲取空數據的頁面。

有沒有辦法從加載數據的服務器頁面獲取？比方說，我想從服務器頁面加載帖子或其他東西。

或者我有什麼問題嗎？

來源

2017-01-30 user3309314

您沒有正確設置state。使用setState()設置新的狀態，你不能沒有使用setState()方法更新狀態：https://facebook.github.io/react/docs/react-component.html#setstate

fetch('http://backend', { 
    mode: 'cors', 
}) 
.then(res => res.json()) 
.then(data => this.setState({data: data}));

另外，您所添加的代碼是不使用陣營服務器端渲染。您使用方法ReactDOMServer.renderToString()做服務器端渲染：https://facebook.github.io/react/docs/react-dom-server.html#rendertostring

來源

2017-01-30 12:46:09

SSR在幕後。 'this.setState'也不起作用。我也嘗試過在通過'this.setState'設置狀態的componentWillMount方法中移動獲取，但問題是一樣的。 – user3309314

是的，即使您修復setState（）問題，您仍將在提取之前渲染組件。問題確實是提取是異步的。

爲了能夠進行服務器端渲染後端調用，您需要等到所有後端調用完成後，爲所有組件設置道具狀態並將其渲染出去。

如果您使用的是Redux，將幫助您確定何時完成的兩個庫有Redial（https://github.com/markdalgleish/redial）和redux-promise-counter（https://github.com/bitgenics/redux-promise-counter）。更多關於下面的內容。

您想要解決的下一個問題是將數據獲取到客戶端並從中初始化您的組件，因此您不必在客戶端上重新（全部）重新請求。

你可以手動完成所有工作，但如果你對SSR很認真，那麼你應該去做一些類似Redux的工作。一種將所有應用程序狀態存儲在一個商店中的方法。使結果更容易存儲，並將其發送到客戶端並從JSON初始化您的商店。

來源

2017-05-14 14:35:57

React服務器端渲染後端請求

回答

相關問題