React Express TypeError: Cannot read property 'then' of undefined

Question

我正在尝试在服务器上呈现我的 React 应用程序，以防用户禁用 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);

而且我确实在我的控制台上看到了呈现的内容。有什么问题请告知，谢谢！

p.s。这里有完整的错误

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)

Answer 1

您没有 return 从您的 serverRender.js 功能中获得承诺。为了调用 serverRender().then，您必须 return 来自 serverRender 函数的承诺。以下将起作用 - 注意隐式 return:

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

export default serverRender;

Answer 2

如果您希望 'thenable'，您需要 return 来自 serverRender 函数的承诺。目前，您没有return从那个函数中获取任何东西。

// 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;

React Express TypeError: Cannot read property 'then' of undefined

React Express TypeError: Cannot read property 'then' of undefined

javascript

express

reactjs

react-dom-server

axios