node.js - React 服务器未启动 - 与 renderProps 有关

Question

我有一个 React 应用程序，这是我的服务器代码:

app.get('*', (req, res) => {
  let history = createMemoryHistory();
  let store = configureStore();
  let routes = createRoutes(history);
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (redirectLocation) {
      res.redirect(301, redirectLocation.pathname + redirectLocation.search);
    } else if (error) {
      res.status(500).send(error.message);
    } else if (renderProps == null) {
      res.status(404).send('Not found');
    } else {
      let { query, params } = renderProps;
      let comp = renderProps.components[renderProps.components.length - 1];
      console.log('fetching');
      comp.fetchData({ store, params })
        .then(() => {
          console.log('done fetching');
          let html = ReactDOMServer.renderToString(
              <Provider store={store}>
              { <RouterContext {...renderProps}/> }
            </Provider>
          );
          const template = store.getState().template;
          const og = templateToOpenGraph(template);
          const full = wrap(html, store.getState(), og);
          res.set({ 'Cache-Control': 'public, max-age=300' })
          res.send(full);
        })
    }
  });
})

当我启动服务器时，它启动得很好。但是当我到达一条路线(任何路线)时，我得到一个错误:
类型错误:comp.fetchData 不是函数


我需要做什么？我不是最擅长 React 的，所以如果我遗漏了一些明显的东西，请告诉我。

谢谢!

Answer 1

应该有方法fetchData在你的组件中。

我没有你的路由配置，但是例如你的 routes.js 中有这样的东西文件

<Route path="/" component={Root}>
<Route path="view/:id" component={View} />
...
</Route>


当您加载页面时 http://example.com/view/1231在您的浏览器中，组件 View将被渲染。您应该实现方法 fetchData .此方法将在渲染之前调用 View

class View extends React.Component {
  fetchData() {
    // implement fetch data here
  }
  ...
}