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服务器端渲染后端请求

回答

相关问题