javascript-React componentDidMount不触发

我建立了一个新的react项目,由于某种原因,没有调用componentDidMount方法。

我已通过在componentDidMount中拨打componentDidMount来验证此行为,但在控制台中看不到它的输出。

此外,componentDidMount无法正常工作。

关于为什么不致电componentDidMount,我感到很困惑。 我尝试同时使用React“ v0.14.0”和“ v0.14.3”。

为什么不调用“ componentDidMount”?

码:

var React = require('react');

var RecipePage = React.createClass({
  componentDidMount: function() {
    console.log('mounted!');
  },
  render: function() {
    return (
      <div>Random Page</div>
    );
  }
});

module.exports = RecipePage;
user3295436 asked 2020-02-17T12:35:52Z
7个解决方案
36 votes

当我有componentWillMount()在同一个类中定义2x时,这发生在我身上。 这不会产生运行时错误。 我只是删除了第二个定义,事情就开始起作用了。

P.Brian.Mackey answered 2020-02-17T12:36:06Z
24 votes

所以...瞧瞧......我终于开始工作了(在后端专家的帮助下)。 无法启动“ componentDidMount”方法的原因是因为我的服务器正在捆绑并在服务器端提供所有的react + html服务。 (只有调用“ render”和“ getInitialState”方法才能创建“ html”模板,该模板通过客户端的浏览器传递...但是它停在那里,因为它认为已经完成了)

解决方法:找到一种通过服务器交付生成的“已编译” html的方法,此外,还可以在客户端再次访问和“触发” react自己的事件。 编译“视图”文件(index.js或index.html)时,我包含了一个“ Application.start()”脚本,该脚本将我的bundle.js代码再次注入模板中。 然后在我的gulpfile中,导出“ Application”变量,以便“ view”文件可以访问它。

Gahh ...为此拉了我的头发。 是时候阅读服务器端和客户端渲染了

user3295436 answered 2020-02-17T12:36:39Z
3 votes

您需要更改module.exports以指向RecipePage而不是TestPage

module.exports = RecipePage;
Yang Li answered 2020-02-17T12:36:59Z
3 votes

我有create-react-app模板。 我将ComponentDidMount添加到应用程序组件中。 我将console.log和警报放入其中。 它不会触发,并且React或浏览器中没有错误。 我尝试使用Chrome和Firefox。

FIX:对我有用的是重新启动我的电脑。 然后它开始工作。 我不知道为什么,但这可以解决问题。

更新:不是我有一个大写的“ C”,它是“ componentDidMount”而不是“ ComponentDidMount” ..我认为是时候该睡觉了。

Sigex answered 2020-02-17T12:37:29Z
3 votes

就我而言,代码前面还有另一个componentDidMount

user5480949 answered 2020-02-17T12:37:49Z
0 votes

就我而言,我在导入的文件中导入了没有export default命令的组件。 当我解决此问题后,componentDidMount开始射击...

King James Enejo answered 2020-02-17T12:38:09Z
0 votes

在我的情况下,我调用componentDidMount()来获取来自服务(API调用)的检索数据,并且在渲染函数上,我有一些组件可以使用从该调用返回的数据,但是由于调用是异步的,因此立即调用render()函数,然后崩溃(得到许多种错误:“ TypeError:read property'XXXX'of undefined”),然后看起来像componentDidMount,它根本没有被调用。为了解决此问题,我在返回组件本身之前检查render myData!== null-在这种情况下,您可以使用通用的loader \ spinner,它不会在实际退出服务的数据之前呈现使用数据的内部组件。

例:

componentDidMount() {
    const { GetMyDataFromServiceFunc } = this.props;

    GetMyDataFromServiceFunc ("150288");
}

render() {
    const { details, loading } = this.props;

    if (!details)
        return (<GenericLoader />);

        return (

        <FullScreenModal
            <Wizard className="order-new-wizard">

                <Component1 editable={false} dataToComponent1={details}
                    goNextStep={this.goNextStep} /> 

                <Component2 values={details.customerDetail} goNextStep={this.goNextStep} />
            </Wizard>
        </FullScreenModal>
        );
    }
Yohan answered 2020-02-17T12:38:34Z
translate from https://stackoverflow.com:/questions/33990133/react-componentdidmount-not-firing