componentWillReceiveProps 라이프 사이클 메서드를 사용하는 경우

componentWillReceiveProps 라이프 사이클 메서드를 사용하는 경우

React/Redux는 처음이라 상태에 문제가 있습니다.

Trail Container.jsx

class TrajectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            trajects: props.trajects,
            onClick: props.onClick
        };
    }

    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps', nextProps);
        this.setState(nextProps);
    }

    render() {
        // When the componentWillReceiveProps is not present, the this.state will hold the old state
        console.log('rerender', this.state);
        return (<div className="col-md-6">
            <h2>Trajects</h2>
            <button className="btn btn-primary" onClick={this.state.onClick}>Add new Traject</button>
            {this.state.trajects.map(traject => <Traject traject={traject} key={traject.name}/>)}
        </div>)
    }
}

const mapStateToProps = function (store) {
    console.log('mapToStateProps', store);
    return {
        trajects: store.trajects
    };
};

const mapDispatchToProps = function (dispatch, ownProps) {
    return {
        onClick: function () {
            dispatch(addTraject());
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(TrajectContainer);

환원기가 새 상태를 반환하면 구성 요소가 새 데이터로 다시 렌더링됩니다.

단, componentWillReceiveProps 함수를 삭제하면 render() 함수는 오래된 상태가 됩니다.

mapStateToProps에서 받은 데이터를 확인해보니 New State입니다.그래서 렌더 함수가 새로운 데이터를 수신하기 위해 componentWillReceiveProps 함수가 필요한 이유를 모르겠습니다.

내가 뭘 잘못하고 있나요?

componentWillReceiveProps상태 값을 새 소품 값으로 업데이트하려는 경우 이 메서드는 소품 값이 변경될 때마다 호출됩니다.

---

이 componentWillReceiveProps 메서드가 필요한 경우

상태 변수에 소품 값을 저장하고 다음과 같이 사용합니다.

this.state.KeyName

그래서 네가 필요한 거야componentWillReceiveProps상태 값을 새 소품 값으로 업데이트하는 라이프사이클 방법. 구성요소의 소품 값만 업데이트되고 상태는 자동으로 업데이트되지 않습니다.상태를 갱신하지 않으면this.state에는 항상 초기 데이터가 있습니다.

componentWillReceiveProps직접 하지 않습니다.

this.props.keyName

이제 리액트는 항상 렌더 메서드 내에서 업데이트된 소품 값을 사용합니다. 소품에 변경이 생겼을 경우 새 소품으로 구성요소를 다시 렌더링합니다.

델 텔레폰 어드바이저:

componentWillReceiveProps()는 마운트된 컴포넌트가 새로운 소품을 받기 전에 호출됩니다.프로포트의 변경에 따라 상태를 갱신할 필요가 있는 경우(예를 들어 리셋), this.props와 nextProps를 비교하여 이를 사용하여 상태 전환을 수행할 수 있습니다.setState()를 지정합니다.

React는 마운트 중에 초기 소품으로 componentWillReceiveProps를 호출하지 않습니다.컴포넌트 중 일부가 업데이트될 수 있는 경우에만 이 메서드를 호출합니다.

제안:

하세요.this.propsUI 포 ui ui ui ui ui 。

갱신하다

componentDidUpdate()

이제 componentWillReceiveProps가 아닌

gaearon re writing resistant components의 기사도 참조한다.

여기에는 두 가지 잠재적인 문제가 있습니다.

1. 스토어에서 값을 끌어와 컴포넌트에 소품으로 반환하기 위해 redux를 사용하고 있는 것을 나타내는 데 소품을 재할당하지 마십시오.

상태를 회피한다는 것은 컨스트럭터나 라이프 사이클 방법이 더 이상 필요하지 않음을 의미합니다.따라서 컴포넌트를 스테이트리스 기능 컴포넌트로 쓸 수 있습니다.이렇게 컴포넌트를 쓰면 퍼포먼스가 향상됩니다.

2. mapDispatcahToProps를 전달하고 있기 때문에 디스패치로 액션을 랩할 필요는 없습니다.오브젝트가 전달되면 오브젝트 내의 각 함수는 액션 작성자로 간주됩니다.기능명은 같지만 디스패치에 포함된 모든 액션 크리에이터가 반환됩니다.

아래는 컴포넌트에서 상태를 삭제하고 redux 스토어에서 반환된 상태에 의존하는 코드 스니펫입니다.

import React from "react";
import { connect } from "react-redux";

const TrajectContainer = ({ trajects, addTraject }) => (
	<div className="col-md-6">
		<h2>Trajects</h2>
		<button className="btn btn-primary" onClick={addTraject}>Add new Traject</button>
		{trajects.map(traject => <Traject traject={traject} key={traject.name} />)}
	</div>
);

const mapStateToProps = ({ trajects }) => ({ trajects });

export default connect( mapStateToProps, { addTraject })(TrajectContainer);

객객우경이 합니다.componentWillReceiveProps새로운 소품을 받을 때 상태를 업데이트해야 합니다.

• 컨스트럭터에서 다음과 같이 자신의 상태를 선언했습니다.와 같이 시는 your your your your your를 합니다.state 해서 들어가는componentWillReceiveProps★★★★★★★★★★★★★★★★★★★★★★★★★」

  this.state = {
      trajects: props.trajects,
      onClick: props.onClick
  };
  

• 소품이 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」componentWillReceiveProps호출되는 함수입니다.이치노따라서 변경 내용이 구성 요소 상태로 변경되도록 상태를 다시 설정해야 합니다.

• 그러나 당신의 논리는 다음과 같아야 합니다.여러 번 호출된 경우 상태 업데이트를 반복하지 않도록 하는 조건입니다.

  componentWillReceiveProps(nextProps) {
   console.log('componentWillReceiveProps', nextProps);
   if (this.props !== nextProps) {
    this.setState(nextProps);
   }
  }
  

소품 내용을 수정하는 경우에만 소품을 보관해야 합니다.하지만 당신의 경우 수정이 없다는 것을 알 수 있습니다. 바로 하실 수 있습니다.this.props.trajects직접 저장할 필요 없이 직접 사용할 수 있습니다. 하면 이 문제를 수 .componentWillReceiveProps은 다음과 것을 합니다.

{this.props.trajects.map(traject => //what ever is your code.... }

도 비슷한 요.withRouter()음음음같 뭇매하다

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TrajectContainer));

구현의 문제는 Redux 스토어 상태(소품에서 변환)를 리액트 상태(this.state)로 복제하는 것입니다.

예에서는, 「」의 ,store.trajects 그 에 갱신됩니다.this.props.traject다음 경우에만 렌더가 트리거되고 갱신됩니다.this.props.traject는 렌더 메서드에서 사용됩니다(대/소문자가 아님).

렌더링 메서드에서 프롭 대신 상태를 사용하기 때문에 다음을 사용하여 컴포넌트 상태를 수동으로 변경해야 합니다.this.setState렌더링을 트리거합니다.

이것은 좋은 패턴이 아닙니다.국가를 사용하지 말고 다음과 같은 소품을 직접 사용하는 것이 좋습니다.

class TrajectContainer extends React.Component {
    render() {
        return (<div className="col-md-6">
            <h2>Trajects</h2>
            <button className="btn btn-primary" onClick={this.props.onClick}>Add new Traject</button>
        {this.props.trajects.map(traject => <Traject traject={traject} key={traject.name}/>)}
    </div>)
}
}
const mapStateToProps = function (store) {
  console.log('mapToStateProps', store);
  return {
    trajects: store.trajects
  };
};

const mapDispatchToProps = function (dispatch, ownProps) {
   return {
      onClick: function () {
        dispatch(addTraject());
      }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(TrajectContainer)

언급URL : https://stackoverflow.com/questions/46113044/when-to-use-componentwillreceiveprops-lifecycle-method