react componentDidMount 不触发

IT技术 javascript reactjs
2021-03-30 02:52:24

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

我已经通过调用console.login验证了这种行为componentDidMount但我在控制台中看不到它的输出。

此外,this.setState()不工作。

我很困惑为什么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;
6个回答

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

快速解决!谢谢.. 这似乎是一个诚实的错误。即使我最终在同一个类中添加了 2 个 componentDidMount,导致第一个被覆盖..谢谢!
2021-06-16 02:52:24

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

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

Gahh...为此把我的头发拔了出来。是时候了解服务器端与客户端渲染了

@vtj205 有趣的问题。您的问题与我的有点不同,因为在我的所有组件(子组件 + 父组件)中,“componentDidMount”都没有触发。在你的情况下,检查是否有任何错字。如果“componentDidMount”能够为子组件触发,它应该能够与您的父组件一起触发。
2021-06-02 02:52:24
我实际上有同样的问题。我在父组件和子组件中调用 componentDidMount() 。它在子组件中触发,而不是在父组件中触发。我不太明白你做了什么来修复它。
2021-06-21 02:52:24

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

我如何对 :facepalm: 做出反应?谢了哥们。
2021-06-16 02:52:24

我有 create-react-app 模板。我将 ComponentDidMount 添加到 App 组件中。我在里面放了一个 console.log 和一个警报。它不会触发并且 React 或浏览器中没有错误。我在 chrome 和 firefox 中尝试过。

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

更新:不是我有一个大写的 'C' 它是 'componentDidMount' 不是 'ComponentDidMount' .. 我想是时候睡觉了。

就我而言,我要求componentDidMount()从服务(API 调用)中检索数据,并且在渲染函数上,我有一些组件应该使用从该调用返回的数据。

但是因为调用是异步的,所以render()函数被立即调用然后它崩溃了(很多错误,比如:)"TypeError:cannot read property 'XXXX' of undefined"然后它看起来componentDidMount根本没有被调用。

为了解决这个问题,我myData !== null在返回组件本身之前检查渲染- 您可以在这种情况下使用通用加载器\微调器,它不会在实际从服务中检索到的数据之前渲染使用数据的内部组件。

例子:

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