Question

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

import Post from './components/Post.jsx';
import Feed from './components/Feed.jsx';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      view: 'feed',
      collection: ''
    }
  }


  componentDidMount() {
    console.log('component did mount')
    this.getCollection();
  }

  async getCollection() {
    try {
      const response = await fetch('/api/page');
      const responseJSON = await response.json();

      this.setState({ collection: responseJSON }, () => {
        console.log("App Component - getCollection() State Updated", this.state);
      });

    } catch (error) {
      console.log("App Component - getCollection() error", error);
    }
  }


  render() {
    return (
      <div>
       Text
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

无法让组件安装到功能。试图向我的mongodb发出ajax请求并在客户端呈现它。我现在需要做的就是进行状态更改，将集合设置为我收到的信息。我尝试使用Ajax请求但是没有用。现在我按照另一个贡献者的建议实现异步提取调用。

非工作ajax请求：

截至目前，仍未触发componentDidMount，且该州的集合属性仍为空字符串。

Answer 1

我建议使用Fetch API进行AJAX调用并使用ES6 Async/Await，因为仅为Ajax导入整个库似乎有点矫枉过正。

import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collection: ''
    }
    this.getCollection = this.getCollection.bind(this)
  }


  componentDidMount() {
    console.log('component did mount')
    this.getCollection();
  }

  async getCollection() {
    try {
      const response = await fetch('/api/blogs');
      const responseJSON = await response.json();

      this.setState({ collection: responseJSON }, () => {
        console.log("App Component - getCollection() State Updated", this.state);
      });

    } catch (error) {
      console.log("App Component - getCollection() error", error);
    }
  }

    render() {
      return (
         <div>
            <h1>Welcome</h1>
          </div>
      );
    }
  }

  ReactDOM.render(<App /> , document.getElementById('app'));

我不确定你在渲染中做了什么，但是我把它遗弃了。希望这能说明如何最好地执行你想要的工作。

Answer 2

要让componentDidMount解雇，您需要render功能。因为首先组件呈现然后它调用函数componentDidMount。

我认为将此添加到您的课程应该可以解决您的问题。

render() {
  return null;
}

componentDidMount没有在React中触发

2 个答案: