Question

我设置了一个新的反应项目，由于某种原因，没有调用function f() { { let x; { // okay, block scoped name const x = "sneaky"; // error, const x = "foo"; } // okay, declared with `let` x = "bar"; // error, already declared in block let x = "inner"; } }方法。

我通过在componentDidMount中调用console.log来验证此行为，但我无法在控制台中看到它的输出。

此外，componentDidMount无效。

我很难理解为什么没有调用this.setState()。我尝试使用React“v0.14.0”和“v0.14.3”。

为什么没有调用'componentDidMount'？

代码：

componentDidMount

Answer 1

当我在同一个班级中componentWillMount()定义了2x时，发生了这种情况。这不会产生运行时错误。我只是删除了第二个定义并开始工作。

Answer 2

所以...瞧瞧......我终于让它工作了（在后端专家的帮助下）。＆＃34; componentDidMount＆＃34;方法没有被解雇是因为我的服务器正在捆绑并提供服务器端的所有react + html内容。（只有＆＃34;渲染＆＃34;和＆＃34; getInitialState＆＃34;方法被调用以创建通过客户端浏览器传递的＆＃34; html＆＃34;模板......但它停在那里，因为它认为它已经完成了）

修复：找到一种方法来提供结果＆＃34;编译＆＃34; html通过服务器和另外，允许反应自己的事件可访问和＆＃34;可消防＆＃34;再次在客户端。编译我的＆＃34;视图＆＃34; file（index.js或index.html），我包含了一个＆＃34; Application.start（）＆＃34;将bundle.js代码再次注入模板的脚本。然后在我的gulpfile中，导出＆＃34;应用程序＆＃34;变量所以＆＃34;视图＆＃34;文件可以访问它。

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

了

Answer 3

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

Answer 4

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

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

更新：不是，我有一个大写的'C'，它是'componentDidMount'而不是'ComponentDidMount'..我认为该睡觉了。

Answer 5

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

Answer 6

对我来说，在 componentDidMount 开始按预期启动后，我还在类中声明了 componentDidUpdate 。

Answer 7

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

Answer 8

在我的情况下，我调用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>
        );
    }

Answer 9

对我来说，原因是 ComponentDidMount 中的大写字母“ C”。

将其更改为 componentDidMount ，并且有效

Answer 10

对我来说，我有 onComponentDidMount() 而不是 componentDidMount() facepalm

Answer 11

尽管您的 componentDidMount 函数中有一个控制台日志语句，但它可能不会执行，因为该函数永远不会运行。如果错误发生在 componentDidMount 被调用之前，例如在您的渲染函数中，您将不会看到控制台日志。 尝试注释掉渲染函数中的代码，看看它是否出现。

反应componentDidMount没有开火

11 个答案: