0

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

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

ps这里完全错误

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)
4

2 回答 2

3

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

// 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;
于 2017-10-12T23:22:09.103 回答
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;
于 2017-10-12T23:20:28.573 回答