Question

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

客户端，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方法是异步的，这意味着它不会影响输出，因为该组件已经被写入。所以答案是首先获取数据，然后安装和渲染组件，而不使用任何异步机制（promises，async等）。我认为分离UI和数据获取逻辑是一个很好的做法，原因很多（SSR，路由，测试），请参阅this blog。

另一种方法是创建组件树，但等待序列化，直到所有承诺都已解决。这就是mobx-server-wait使用的方法。

使用Mobx异步加载组件数据服务器端

1 个答案: