상태 es6 리액션 지우기

상태 es6 리액션 지우기

구성 요소를 지우는 중statees6 구문에 대한 참조를 찾을 수 없음.사용 중:

this.replaceState(this.getInitialState());

그러나 이것은 es6 클래스 구문에서는 작동하지 않는다.

어떻게 하면 같은 결과를 얻을 수 있을까?

내가 아는 바로는 리액션 컴포넌트는 초기 상태의 복사본을 보관하지 않기 때문에 네가 직접 해야 할 거야.

const initialState = {
    /* etc */
};

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = initialState;
    }
    reset() {
        this.setState(initialState);
    }
    /* etc */
}

선에 주의하라.this.state = initialState;절대 국가를 변이하지 말도록 요구하지 않으면initialState리셋을 불가능하게 만들거야만약 돌연변이를 피할 수 없다면, 그 다음엔 의 사본을 만들어야 할 것이다.initialState시공사(또는 제작)에서.initialState상술한 바와 같다.getInitialState().)

마지막으로, 나는 네가 사용하는 것을 추천한다.setState()아닌 것 같다replaceState().

문제

승인된 답변:

const initialState = {
    /* etc */
};

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = initialState;
    }
    reset() {
        this.setState(initialState);
    }
    /* etc */
}

불행히도 옳지 않다.

initialState에 대한 참고자료로 전달되다.this.state그래서 네가 바뀔 때마다state너 또한 변한다.initialState(여기는 콘스탄트가 별로 중요하지 않다.)그 결과 다시는 돌아갈 수 없게 된다.initialState.

해결책

깊이 베껴야 한다. initialState로state그러면 효과가 있을 것이다.직접 딥 카피 기능을 작성하거나 이와 같은 기존 모듈을 사용하십시오.

이것이 함수로 구현된 솔루션이다.

Class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = this.getInitialState();
  }

  getInitialState = () => ({
    /* state props */
  })

  resetState = () => {
     this.setState(this.getInitialState());
  }
}

설정을 포함하는 솔루션this.state리액션 16에서는 직접 작동하지 않으므로 각 키를 재설정하기 위해 수행한 작업은 다음과 같다.

  const initialState = { example: 'example' }
  ...
  constructor() {
      super()
      this.state = initialState
  }
  ...
  reset() {
    const keys = Object.keys(this.state)
    const stateReset = keys.reduce((acc, v) => ({ ...acc, [v]: undefined }), {})
    this.setState({ ...stateReset, ...initialState })
  }

첫째, 사용 시 초기 상태를 저장해야 한다.componentWillMount()구성 요소 수명 주기부터 기능:

componentWillMount() {
    this.initialState = this.state
}

이렇게 하면 초기 상태가 저장되고 필요할 때 언제든지 전화를 걸어 상태를 재설정하는 데 사용할 수 있다.

this.setState(this.initialState)

const initialState = {
    a: '',
    b: '',
    c: ''
};

class ExampleComponent extends Component {
    state = { ...initialState } // use spread operator to avoid mutation
    handleReset = this.handleReset.bind(this);

    handleReset() {
         this.setState(initialState);
    }
 }

상태를 재설정하려면 초기 상태를 변경하지 않는 것이 중요하다는 점을 기억하십시오.

state = {...initialState} // GOOD 
// => state points to a new obj in memory which has the values of initialState

state = initialState // BAD 
// => they point to the same obj in memory

가장 편리한 방법은 ES6 스프레드 오퍼레이터를 사용하는 것이다.그러나 Object.assign을 대신 사용할 수도 있다.그들 둘 다 같은 것을 이룰 것이다.

state = Object.assign({}, initialState); // GOOD
state = {...initialState}; // GOOD

대부분의 경우, 당신은 깊은 사본이 필요하지 않으며, 거의 초기 상태는 객체의 대상이기 때문에, babel transpiles를 객체로 보내는 스프레드 오퍼레이터를 사용하는 것은 괜찮다.

따라서 시공자 내부에서는 다음을 수행할 수 있다.

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            key: value,
            key2: value
        }
        this.initialState = { ...this.state } 
    }
}

거기서 당신은 사용할 수 있다.

this.setState(this.initialState);

리셋하기 위해그러나 어떤 이유로든 초기 상태가 더 복잡한 개체인 경우 일부 라이브러리를 사용하십시오.

이렇게 하면 돼

class MyComponent extends React.Component{
  constructor(props){
    super(props);
    this._initState = {
        a: 1,
        b: 2
      }
    this.state = this._initState;
  }

  _resetState(){
     this.setState(this._initState);
   }
}

업데이트: 사실 이것은 틀렸어.미래의 독자는 @RaptoX 답변을 참조하십시오.또한 참조 할당으로 인한 이상한 상태 수정을 방지하기 위해 불변 라이브러리를 사용할 수 있다.

리셋 기능도 다음과 같이 상태를 할당해야 한다는 위의 대답에 덧붙여 말하겠다.

reset() {
  this.state = initialState;
  this.setState(initialState);
}

그 이유는 setState가 기존 키를 업데이트하기만 하면 초기 상태가 아닌 속성을 선택하면 해당 키/값이 지워지지 않기 때문이다.할당만으로는 구성 요소를 다시 렌더링할 수 없으므로 setState 통화도 포함하십시오. 이 문제를 해결할 수도 있을 겁니다.할당 후 상태({})를 설정하십시오.

어떤 상황에서는 단지 모든 가치관을 설정하는 것으로 충분하다.state로null.

만약 당신의 상태가 그런 식으로 업데이트 된다면, 당신은 그 안에 무엇이 있는지 모를 수 있다, 당신은 사용하기를 원할 수도 있다.

this.setState(Object.assign(...Object.keys(this.state).map(k => ({[k]: null}))))

어느 것이 그 상태를 다음과 같이 변화시킬 것인가.

{foo: 1, bar: 2, spam: "whatever"} > {foo: null, bar: null, spam: null}

모든 경우에 해결책은 아니지만, 나에게는 잘 통한다.

상태 개체를 복제하고 각 개체를 반복한 후undefined그러나 이 방법은 받아들여진 대답만큼 좋지 않다.

const clonedState = this.state;

const keys = Object.keys(clonedState);
keys.forEach(key => (clonedState[key] = undefined));

this.setState(clonedState);

class MyComponent extends Component {
 constructor(props){
  super(props)
   this.state = {
     inputVal: props.inputValue
  }
   // preserve the initial state in a new object
   this.baseState = this.state 
}
  resetForm = () => {
    this.setState(this.baseState)
  }

}

deep copy를 사용하면 lodash로 할 수 있다.

import _ from "lodash";

const INITIAL_STATE = {};

constructor(props) {
    super(props);
    this.state = _.cloneDeep(INITIAL_STATE);
}

reset() {
    this.setState(_.cloneDeep(INITIAL_STATE));
}

class x extends Components {
constructor() {
 super();
 this.state = {

  name: 'mark',
  age: 32,
  isAdmin: true,
  hits: 0,

  // since this.state is an object
  // simply add a method..

  resetSelectively() {
         //i don't want to reset both name and age
    // THIS IS FOR TRANSPARENCY. You don't need to code for name and age
    // it will assume the values in default..
    // this.name = this.name;   //which means the current state.
    // this.age = this.age;


    // do reset isAdmin and hits(suppose this.state.hits is 100 now)

    isAdmin = false;
    hits = 0;
  }// resetSelectively..

}//constructor..

/* now from any function i can just call */
myfunction() {
  /**
   * this function code..
   */
   resetValues();

}// myfunction..

resetValues() {
  this.state.resetSelectively();
}//resetValues

/////
//finally you can reset the values in constructor selectively at any point

...rest of the class..

}//class

참조URL: https://stackoverflow.com/questions/34845650/clearing-state-es6-react