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);
        })
    }
  });
})

当我启动服务器时，启动就好了。但是当我遇到一条路线（任何路线）时，我收到一个错误： TypeError: comp.fetchData is not a function

我需要做什么？我不是最好的反应，所以如果我错过了一些明显的东西，请告诉我。

谢谢！

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
  }
  ...
}

React服务器无法启动 - 使用renderProps

1 个答案: