2017-10-12 100 views
0

我試圖在服務器上呈現我的反應應用程序,因爲用戶禁用了JavaScript並且還爲了更好的搜索結果。但是在出口和使用函數之間的某處,我得到了TypeError: Cannot read property 'then' of undefined錯誤。React Express TypeError:無法讀取未定義的屬性'then'

下面是一些我的代碼

// 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) 
+0

該錯誤發生在server.js中,所以它是未定義的'serverRender()'。它是否正確地導入到你的server.js文件中? – Jaxx

回答

2

如果您希望它是'可靠的',則需要從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; 
+0

啊我現在看到它,感謝您的超級快速回復! – Coffee

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; 
相關問題