GetDerivedStateFromProps를 사용하여 초기화한 후 소품을 상태로 전환하시겠습니까?

GetDerivedStateFromProps를 사용하여 초기화한 후 소품을 상태로 전환하시겠습니까?

다음과 같은 매우 간단한 구성 요소가 있다.

export default class Editor extends Component {
  constructor(props) {
    super(props);

    this.state = { field: "Some Initial Text" };

    this.handleChangeField = this.handleChangeField.bind(this);
  }

  handleChangeField(e) {
    this.setState({field: e.target.value});
  }

  render() {
    return (
        <div>
          <input type="text" name="word" value={this.state.field} onChange={this.handleChangeField} />
          {this.state.field}
        </div>
    );
  }
}

그냥 들판이 있을 뿐이야.필드는 사용자가 편집할 수 있다.사용자가 형제자매 구성 요소에서 클릭하는 내용에 따라, 위의 구성 요소는 "라는 소품"을 받게 된다.fieldValue입력 필드에 표시되는 내용이 될 것이다.사용자가 이 입력란을 편집할 수 있어야 하기 때문에 단순히 입력란에 소품을 직접 넣을 수는 없지만 상태를 사용한다.그래서 나는 받침대로부터 구성품 상태를 초기화한다.

그러나 이 받침대는 구성부품을 초기화한 후에도 변경될 수 있다.즉, 초기 값일 뿐만 아니라 사용자가 형제 구성 요소에서 클릭하는 내용에 따라 런타임 중에 변경될 수 있다.

React 16.3에서 다음과 같은 문제를 어떻게 해결하시겠습니까?ComponentWillReceiveProps더 이상 사용되지 않는지?나는 조사해 보았다.GetDerivedStateFromProps, 그러나 나는 그것을 어떻게 사용하는지 완전히 이해하지 못한다.

제어되지 않는 구성 요소와 제어되지 않는 구성 요소를 동기화하려고 하지 않을 것이다. 구성 요소가 확장될 때 논리가 미쳐버릴 수 있기 때문이다.

이렇게 하면, 프로펠러 변경 사항을 추적하고 그에 따라 상태를 업데이트하려면 componentDidUpdate를 사용할 수 있지만 상태를 업데이트하기 전에 유효한 조건이 있는지 확인하십시오.

실행 예는 다음과 같다.

class Editor extends React.Component {

  state = { field: this.props.defaultValue };

  componentDidUpdate(prevProps) {
    const { defaultValue } = this.props;
    if (prevProps.defaultValue !== defaultValue) {
      this.setState({ field: defaultValue });
    }
  }

  handleChangeField = (e) => {
    this.setState({ field: e.target.value });
  }

  render() {
    return (
      <div>
        <input type="text" name="word" value={this.state.field} onChange={this.handleChangeField} />
        {this.props.defaultValue}
      </div>
    );
  }
}

class App extends React.Component {
  state = { value: 'A default value' }

  handleChange = ({ target }) => this.setState({ value: target.value })

  render() {
    const { value } = this.state;
    return (
      <div>
        <h3>App </h3>
        <input type="text" value={value} onChange={this.handleChange} />
        <hr />
        <h3>Editor</h3>
        <Editor defaultValue={value} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

매우 간단하다.프로토타입이 있다 할여기 작동해야.

export default class Editor extends Component {
  static getDerivedStateFromProps(props, state) {
    // You need to return object that will be used to fill the state, not manipulate the state itself
    return {
      field: state.field
    }
  }

  constructor(props) {
    super(props);

    this.handleChangeField = this.handleChangeField.bind(this);
  }

  handleChangeField(e) {
    this.setState({field: e.target.value});
  }

  render() {
    return (
        <div>
          <input type="text" name="word" value={this.state.field} onChange={this.handleChangeField} />
          {this.state.field}
        </div>
    );
  }
}

참조URL: https://stackoverflow.com/questions/52679617/turning-props-into-state-after-initialisation-with-getderivedstatefromprops