Javascript 反应 componentDidMount 不触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33990133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react componentDidMount not firing
提问by user3295436
I set up a new react project and for some reason, the componentDidMountmethod is not being called.
我建立了一个新的反应项目，由于某种原因，该componentDidMount方法没有被调用。
I have verified this behavior by placing a call to console.login componentDidMountbut I cannot see its output in the console.
我已经通过调用console.login验证了这种行为，componentDidMount但我在控制台中看不到它的输出。
Furthermore, this.setState()is not working.
此外，this.setState()不工作。
I'm pretty stumped as to why the componentDidMountis not being called. I tried using both React "v0.14.0" and "v0.14.3".
我很困惑为什么componentDidMount没有被调用。我尝试同时使用 React "v0.14.0" 和 "v0.14.3"。
Why is 'componentDidMount' not being called?
为什么没有调用“componentDidMount”？
Code:
代码：
var React = require('react');
var RecipePage = React.createClass({
componentDidMount: function() {
console.log('mounted!');
},
render: function() {
return (
<div>Random Page</div>
);
}
});
module.exports = RecipePage;
采纳答案by user3295436
So... lo and behold.... I finally got it working(with the help of a back-end expert). The reason why the "componentDidMount" methods weren't firing was because my server was bundling and serving all the react + html stuff on server side. (Only "render" and "getInitialState" methods get called to create the "html" template that gets delivered through the client's browser...but it stops there because it thinks it's finished)
所以......瞧瞧......我终于让它工作了（在后端专家的帮助下）。“componentDidMount”方法没有触发的原因是因为我的服务器正在捆绑并在服务器端提供所有 react + html 内容。（只有“render”和“getInitialState”方法被调用来创建通过客户端浏览器传递的“html”模板......但它停在那里，因为它认为它已经完成了）
The fix:Find a way to deliver the resulting "compiled" html through the server AND in addition, allow react's own events to be accessible and "fireable" again on the client side. When compiling my "view" file( index.js or index.html ), I included an "Application.start()" script that injects my bundle.js code into the template again. Then in my gulpfile, exported the "Application" variable so the "view" file can access it.
修复：找到一种方法通过服务器传递生成的“编译”html，此外，允许在客户端再次访问和“触发”反应自己的事件。在编译我的“视图”文件（ index.js 或 index.html ）时，我包含了一个“Application.start()”脚本，它再次将我的 bundle.js 代码注入到模板中。然后在我的 gulpfile 中，导出“应用程序”变量，以便“视图”文件可以访问它。
Gahh...pulled my hair out for this. Time to read up on server side vs. client side rendering
Gahh...为此拔了我的头发。是时候了解服务器端与客户端渲染了
回答by P.Brian.Mackey
This happened to me when I had componentWillMount()defined 2x in the same class. This did not produce a runtime error. I simply removed the second definition and things started working.
当我componentWillMount()在同一个类中定义 2x时，这发生在我身上。这没有产生运行时错误。我只是删除了第二个定义，事情就开始起作用了。
回答by user5480949
In my case, there was another componentDidMountearlier in the code
就我而言，componentDidMount代码中还有另一个
回答by Sigex
I have the create-react-app template. I added the ComponentDidMount into the App Component. I put a console.log and an alert into it. It does not fire and there are no errors in React or the browser. I tried in chrome and firefox.
我有 create-react-app 模板。我将 ComponentDidMount 添加到 App 组件中。我在里面放了一个 console.log 和一个警报。它不会触发并且 React 或浏览器中没有错误。我在 chrome 和 firefox 中尝试过。
FIX: what worked for me was rebooting my pc. Then it started working. I do not know why, but this resolve the issue.
修复：对我有用的是重新启动我的电脑。然后它开始工作。我不知道为什么，但这可以解决问题。
Update: Not I have an uppercase 'C' it is 'componentDidMount' not 'ComponentDidMount'.. I think it's time for sleep.
更新：不是我有一个大写的 'C' 它是 'componentDidMount' 不是 'ComponentDidMount' .. 我想是时候睡觉了。
回答by Yang Li
You need to change your module.exports to point at RecipePage not TestPage
您需要更改 module.exports 以指向 RecipePage 而不是 TestPage
module.exports = RecipePage;
回答by Yohan
In my case I call componentDidMount() for retreive data from service (API call) and on render function I has components that suppose to use the data that return from this call, but because the call is Async the render() function is called immediatly and then it's crash(get many errors of kind: "TypeError:read property 'XXXX' of undefined" ) then it's look like componentDidMount it's not called at all. For solve this issue I check on render that myData !== null before return the component itself - You can use generic loader\spinner on this case that will not render internal component that use data before the data that actually retreive from service.
在我的例子中，我调用 componentDidMount() 来从服务（API 调用）和渲染函数中检索数据，我有组件假设使用从这个调用返回的数据，但是因为调用是异步的，render() 函数被立即调用然后它崩溃了（得到很多类型的错误：“TypeError:read property 'XXXX' of undefined”）然后它看起来像 componentDidMount 它根本没有被调用。为了解决这个问题，我在返回组件本身之前检查渲染 myData !== null - 您可以在这种情况下使用通用 loader\spinner，它不会在实际从服务中检索数据之前渲染使用数据的内部组件。
Example:
例子：
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>
);
}
回答by Shounak Bose
For me I also declared componentDidUpdatein the class after that componentDidMountstarted firing as expected.
对我来说，在componentDidMount按预期开始触发后，我还在类中声明了componentDidUpdate。
回答by Ankur Marwaha
For me, the reason was upper case "C" in ComponentDidMount.
对我来说，原因是ComponentDidMount 中的大写“C” 。
Changed it to componentDidMountand it worked
将其更改为componentDidMount并且它起作用了
回答by King James Enejo
In my case, I imported a component without the export defaultcommand in the imported file. When I fixed this, componentDidMountstarted firing...
就我而言，我export default在导入的文件中导入了一个没有命令的组件。当我解决这个问题时，componentDidMount开始射击......
