React Express TypeError：无法读取未定义的属性“then”答案

【问题标题】：React Express TypeError: Cannot read property 'then' of undefinedReact Express TypeError：无法读取未定义的属性“then”
【发布时间】：2017-10-12 23:14:35
【问题描述】：

我正在尝试在服务器上呈现我的反应应用程序，以防用户禁用了 javascript 并获得更好的搜索结果。但是在导出和使用函数之间的某个地方，我得到了TypeError: Cannot read property 'then' of undefined 错误。

这是我的一些代码

// serverRender.js
import ReactDOMServer from 'react-dom/server';
import axios from 'axios';

const serverRender = () => {
    axios.get(`${config.serverUrl}/api/content`)
        .then(res => {
            return ReactDOMServer.renderToString(
                <App initialData={res.data.content} />
            );
        })
        .catch(console.error);
}

export default serverRender;

然后我将代码注入到我的 server.js 中

// server.js
import express from 'express';    
import serverRender from './serverRender';

const server = express();
server.get('/', (req, res) => {
    serverRender()
        .then(content => {
            res.render('index', {
                content
            });
        })
        .catch(console.error);
});

我也试过了

// serverRender.js
axios.get(`${config.serverUrl}/api/content`)
    .then(res => {
        console.log(
            ReactDOMServer.renderToString(
                <App initialData={res.data.content} />
            )
        );
    })
    .catch(console.error);

我确实在控制台上看到了渲染的内容。请告诉我有什么问题，谢谢！

附言这里完全错误

TypeError: Cannot read property 'then' of undefined
    at /.../server.js:19:5
    at Layer.handle [as handle_request] (/.../node_modules/express/lib/router/layer.js:95:5)
    at next (/.../node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/.../node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/.../node_modules/express/lib/router/layer.js:95:5)
    at /.../node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/...t/node_modules/express/lib/router/index.js:335:12)
    at next (/.../node_modules/express/lib/router/index.js:275:10)
    at sass (/.../node_modules/node-sass-middleware/middleware.js:127:14)
    at Layer.handle [as handle_request] (/.../node_modules/express/lib/router/layer.js:95:5)

【问题讨论】：

server.js中出现错误，所以是serverRender()未定义。它是否正确导入到您的 server.js 文件中？

标签： javascript reactjs express axios react-dom-server

【解决方案1】：

如果你希望它是“thenable”，你需要从你的 serverRender 函数中返回一个 Promise。目前，您没有从该函数返回任何内容。

// serverRender.js
const serverRender = () => {
return axios.get(`${config.serverUrl}/api/content`)
    .then(res => {
        return ReactDOMServer.renderToString(
            <App initialData={res.data.content} />
        );
    })
    .catch(console.error);
}

export default serverRender;

【讨论】：

【解决方案2】：

你没有从你的 serverRender.js 函数返回一个承诺。为了调用serverRender().then，您必须从 serverRender 函数返回承诺。以下将起作用 - 注意隐式返回：

const serverRender = () => (
    axios.get(`${config.serverUrl}/api/content`)
    .then(res => {
        return ReactDOMServer.renderToString(
            <App initialData={res.data.content} />
        );
    })
    .catch(console.error);
);

export default serverRender;

【讨论】：