使用MOBX加载组件数据不同步的服务器端

Question

我有一个问题，弄清楚如何使一个反应组件具有基于异步获取的数据的初始状态。MyComponent从API获取数据，并通过MOBX action设置其内部data属性。

客户端， componentDidMount被调用并获取数据然后设置并正确渲染。

import React from 'react';
import { observer } from 'mobx-react';
import { observable, runInAction } from 'mobx';
@observer
export default class MyComponent extends React.Component {
     @observable data = [];
     async fetchData () {
         loadData()
           .then(results => {
               runInAction( () => {
                   this.data = results;
               });
           });
     }
     componentDidMount () {
         this.fetchData();
     }
     render () {
        // Render this.data
     }
}

我知道在服务器上未调用componentDidMount。

我有这样的服务器：

import React from 'react';
import { renderToString } from 'react-dom/server';
import { useStaticRendering } from 'mobx-react';
import { match, RouterContext } from 'react-router';
import { renderStatic } from 'glamor/server'
import routes from './shared/routes';
useStaticRendering(true);
app.get('*', (req, res) => {
    match({ routes: routes, location: req.url }, (err, redirect, props) => {
        if (err) {
            console.log('Error', err);
            res.status(500).send(err);
        }
        else if (redirect) {
            res.redirect(302, redirect.pathname + redirect.search);
        }
        else if (props) {
            const { html, css, ids } = renderStatic(() => renderToString(<RouterContext { ...props }/>));
            res.render('../build/index', {
                html,
                css
            });
        }
        else {
            res.status(404).send('Not found');
        }
    })
})

我看到了许多帖子，其中计算并通过Provider组件的初始存储。我的组成部分是渲染的，但它们的状态尚未初始化。我不想将这些数据持续到商店中，并希望它在本地范围内与组件范围内。如何完成？

Answer 1

对于服务器端渲染，您需要先获取数据，然后渲染。组件在SSR期间没有生命周期，只有一次渲染到一个字符串，但无法响应以后的任何更改。

由于您的DataFetch方法是异步，因此这意味着它永远不会影响输出，因为该组件已经编写。因此，答案是首先获取数据，然后在两者之间使用任何异步机制（承诺，异步等），而无需使用任何异步机制（承诺，异步等）。我认为将UI和数据获取逻辑分开是一个很好的做法，原因是许多原因（SSR，路由，测试），请参阅此博客。

另一种方法是创建组件树，但要等待序列化，直到您的所有诺言已经解决。这就是例如MOBX-Server等使用的方法。