Question

我试图在服务器上渲染我的反应应用程序，因为用户已禁用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

您没有从serverRender.js函数返回承诺。要调用serverRender().then，您必须从serverRender函数返回promise。以下内容将起作用 - 注意隐式返回：

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

如果您希望它是“可用的”，则需要从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;

React Express TypeError：无法读取属性＆＃39;然后＆＃39;未定义的

2 个答案: