1

我在弄清楚如何让反应组件具有基于异步获取的数据的初始状态时遇到问题。MyComponent 从 API 获取数据并data通过 Mobx 设置其内部属性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组件传递。我的组件已渲染，但它们的状态未初始化。我不想将这些数据保存在商店中，并希望它在本地范围内适用于组件。如何做呢 ？

4

1 回答 1

4

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

由于您的 datafetch 方法是异步的，这意味着它永远不会影响输出，因为组件已经被写入。所以答案是先获取数据，然后挂载和渲染组件，中间不使用任何异步机制（承诺、异步等）。我认为分离 UI 和数据获取逻辑是一种很好的做法，原因有很多（SSR、路由、测试），请参阅此博客。

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

于 2016-12-16T19:45:49.553 回答