Question

你好我是React＆amp; nodeJS，我尝试通过react调用我的nodejs api，即使在呈现页面之后也没有触发我的componentDidMount。有人可以就我可能遗失的地方提出一些建议。

var React = require('react');

module.exports = React.createClass({
    getInitialState: function() {
        return {
          jobs: []
        }
      },
    componentDidMount: function() {
        console.log("mount");
        var _this = this;
        this.serverRequest = $.ajax({
        ....
          }.bind(this)
        });
      },

      componentWillUnmount: function() {
        this.serverRequest.abort();
      },

      render: function() {
            return (
              <div><h1>Jobs</h1>
                {this.state.jobs.map(function(job) {
                  return (
                    <div key={job.id} className="job">
                        {job.name}
                        {job.address}
                    </div>
                  );
                })}
              </div>
            )
          }
});

在我的NodeServer.js文件中，我以这种方式呼叫，我的html页面中只显示了作业

app.get('/', function(request, response) {
    var htmlCode = ReactDOMServer.renderToString(React.createElement(Component));
    response.send(htmlCode);
})

Answer 1

在后端渲染时，不能使用React组件生命周期方法加载数据，这只能在客户端中使用。在服务器上呈现组件时，它只呈现一次，没有数据。数据以异步方式加载，完成后，组件已经呈现。您必须在组件外部获取数据，然后将其作为prop传递给组件。

componentDidMount未被触发

1 个答案: