리액트 컴포넌트 컨스트럭터에 아약스를 넣을 수 있습니까?

리액트 컴포넌트 컨스트럭터에 아약스를 넣을 수 있습니까?

import React from 'react';

class AjaxInConstructor extends React.Component {
  constructor() {
    super();
    this.state = { name: '', age: '' };
    this.loadData().then((data) => {
      this.setState(data);
    });
  }
  // simulate the AJAX (network I/O)
  public loadData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          name: 'slideshowp2',
          age: 123,
        });
      }, 2000);
    });
  }

  public render() {
    const { name, age } = this.state;
    return (
      <div>
        <p>Can I init component state async?</p>
        <p>name: {name}</p>
        <p>age: {age}</p>
      </div>
    );
  }
}

ReactDOM.render(<AjaxInConstructor />, document.body);

위는 제 데모 코드입니다.사람들이 항상 아약스를 넣는다는 걸 알아요componentDidMount아니면componentWillMount라이프사이클을 말합니다.

하지만 이 경우도 효과가 있습니다.

크롬으로console,React실수하지 않고 싸움을 걸어요.그럼 제 질문은 이와 같은 사용법이 완전히 맞습니까?무슨 오류라도 있습니까?

당신이 원하는 장소에서 AJAX 전화를 걸 수 있습니다.컨스트럭터에서 AJAX 호출을 하는 것은 "잘못된" 것이 없지만, 문제점이 있습니다.구성 요소가 마운트된 후 또는 마운트 직전에만 AJAX 호출을 수행할 수 있습니다.

그래서 컴포넌트가 렌더링되기 전에, AJAX 호출을 하는 것은componentDidMount()아니면componentWillMount()권장합니다.리액트가 "사물"을 할 수 있다고 해서 해야 하는 것은 아닙니다! :)

갱신하다

저는 또한 처음에 제 대답이 엄격하지 않았다는 것을 깨달았습니다.저는 항상 동료 프로그래머가 따라온 것을 맹목적으로 따라왔습니다.

조금 검색한 결과, componentDidMount in React 구성 요소에서 ajax 요청이 수행되어야 하는 이유는 무엇입니까?

그 대답의 핵심은 당신이 전화할 때setState()인에componentWillMount(), 구성 요소가 다시 render되지 않습니다.따라서 사용해야 합니다.componentDidMount(). 더 읽어본 결과, React 팀에서 후속 릴리즈에서 수정된 것을 알게 되었습니다.이제 전화하셔도 됩니다.setState()인에componentWillMount(). 그래서 모든 사람들이 AJAX에 전화할 것을 추천하는 이유라고 생각합니다.didMount.

댓글 중 하나가 제 생각을 아주 구체적으로 제시해주기도 합니다.

setState를 componentWillMount나 componentDidMount에서 직접 호출하는 것이 아니라 새로운 비동기 스택에서 호출하는 것입니다.저는 다양한 방법으로 라이브 이벤트 청취자들과 함께 이것을 언급하기 위해 정확한 반응이 어떻게 구현되는지 모릅니다. 문서화되지 않은 기능을 사용하는 것이 충분히 무섭지 않고 향후 버전에서도 작동할 수 있을지도 모른다는 약간의 흥분을 원한다면 자유롭게 사용하십시오. 그것이 깨질지 말지 모르겠습니다.

언급URL : https://stackoverflow.com/questions/38913138/can-i-put-ajax-in-react-component-constructor