使用 ES6 构造函数呈现 React 组件的刷新页面会破坏应用程序

Question

我正在使用 React-Router 和 Alt 在 ES6 中构建一个 React 网络应用程序，遵循 this tutorial。我的所有组件都正确呈现，但那些具有构造函数的组件在浏览器页面刷新时中断。这是错误。

TypeError: undefined is not a function
   at new Track (/Users/juancarlosfarah/Git/maestro/src/components/Track.js:14:17)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:135:16)
   at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
   at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:247:34)
   at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
   at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:247:34)
   at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
   at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
   at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactMultiChild.js:192:44)
   at ReactDOMComponent.Mixin._createContentMarkup (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactDOMComponent.js:289:32)
   at ReactDOMComponent.Mixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactDOMComponent.js:199:12)
   at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
   at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:247:34)
   at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)

在 Track.js 上，第 14 行定义了构造函数：

class Track extends React.Component {

    constructor(props) {
        super(props);
        console.debug("Constructing Track...");
        this.state = TrackStore.getState();
        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleSaveClick = this.handleSaveClick.bind(this);
        this.handleUndoClick = this.handleUndoClick.bind(this);
        this.renderButtons = this.renderButtons.bind(this);
        this.onChange = this.onChange.bind(this);
    }
    ...
}

在app.js中，我将路由渲染如下：

Router.run(routes, Router.HistoryLocation, function(Handler) {
    React.render(<Handler />, document.getElementById('app'));
});

它们在routes.js中定义：

export default (
    <Route handler={App}>
        <Route path='/' handler={Home} />
        <Route path="/tracks/" handler={Tracks} />
        <Route path="/track/:id" handler={Track} />
    </Route>
);

在 server.js 中，页面使用 Swig 呈现。

app.use(function(req, res) {
    Router.run(routes, req.path, function(Handler) {
        let html = React.renderToString(React.createElement(Handler));
        let page = swig.renderFile('views/index.html', { html: html });
        res.send(page);
    });
});

即使我删除了 constructor 中的所有代码并只留下一条 console.log 语句，我在刷新浏览器时仍会收到错误消息。如果没有构造函数，则页面在刷新时呈现良好。

Answer 1

经过很长一段时间，我弄清楚了我遇到的问题。在 Track.js 中，我包含了一行来帮助我调试错误，它叫做 console.debug() （我现在已经明确地将它添加到问题的代码中，但我最初没有显示它）。当 Track.js 由客户端呈现时，这不是问题，因为 Chrome 中的控制台将能够运行 console.debug()。但是直接访问URL时，页面会被服务器渲染，不支持console.debug()。因此，应用程序将中断并显示神秘错误。删除该行或将其更改为 console.log() 解决了问题。

使用 ES6 构造函数呈现 React 组件的刷新页面会破坏应用程序

Refreshing Page that Renders React Component with ES6 Constructor Breaks App

javascript

ecmascript-6

reactjs

react-router