Question

我搜索了很多并且没有找到任何实现在反应服务器端加载数据异步，然后在没有任何flux（redux）实现的情况下呈现标记。这是视图（api和视图一起）：

class Home extends React.Component {
  constructor(props) {
    super(props); 
    this.state = {meta: []};
  }

  componentDidMount() {
    Request.get('http://example.com/api/users').then((resp) => {
      this.setState({meta: resp.body});
    });

  }

  render() {
    return (
      <div>
        {this.state.meta.map((m, i) => {
          <p key={i}>{m.user}</p>
        })}
    );
  }
}

路由器文件（router.js）：

export default (
    <Route component={App} path="/">
        <IndexRoute component={Home}/>
    </Route>
);

这就是我在服务器上使用的（使用react-router）

app.use((req, res) => {

    Router.match({routes: routes, location: req.url}, (err, redirectLocation, renderProps) => {
        if(err) res.status(500).send(err.message);

        else if(redirectLocation)
            res.status(302).redirect(redirectLocation.pathname + redirectLocation.search);

        else if(renderProps) {
                var html = ReactDOM.renderToString(<RouterContext {...renderProps}/>);
                res.render("layout", {body: html});
        }
        else res.status(404).send("Page not Found");
    })
});

我知道一些基本的事情是将api调用附加到每个路由器URL，然后在此之后解析renderToString()。但我不明白如何使用react-router做到这一点。我不想使用任何库或flux或redux实现。

Answer 1

您可以在getComponent中使用react-router道具来处理这种情况。

//route.js
  function fetchAndGetComponent(location,callback){
    Request.get('http://example.com/api/users').then((resp) => {
      let meta = resp.body;
      callback(null,() => <Home meta={meta} />);
    });
  }

  <Route component={App} path="/">
        <IndexRoute getComponent={fetchAndGetComponent}/>
  </Route>

如何使用异步数据在反应服务器端呈现组件

1 个答案: