덮어 쓰기 상태가 아닌 반응

Question

내 구성 요소의 상태를 변경하려면 usign setState입니다.

상태에서 요소를 삭제해야 할 때까지 제대로 작동합니다.

이의 내가 내 가게에있는 척하자 : 나는 다른 요소를 추가 할 경우

{ 
    0: {name: foo}, 
    1: {name: bar} 
} 

, 그것은 잘 작동 : 위의 코드와

store[2] = {name: hohoho}; 
setState(store, console.log(this.state)); 

, 내가 예상되는 상태와 끝까지 :

{ 
    0: {name: foo}, 
    1: {name: bar}, 
    2: {name: hohoho}, 
} 

그러나 저장소에서 요소 중 하나를 삭제하고 상태를 다시 변경하면 삭제되지 않습니다.

delete store[2] 

내가 (가게를) CONSOLE.LOG, 내가 얻을 : 다음

{ 
    0: {name: foo}, 
    1: {name: bar} 
} 

: 상태에서

setState(store, console.log(this.state)) 

저를 제공합니다

{ 
    0: {name: foo}, 
    1: {name: bar}, 
    2: {name: hohoho}, 
} 

그러나 이상한 점은 다른 요소를 상점에 추가하고 상태를 설정 한 경우입니다.

store[3] = {name: heyheyhey}; 
setState(store, console.log(this.state)); 

나는 다음과 같은 상태로 끝날 :

은을 console.log (저장소) 다음 날을 제공하더라도

{ 
    0: {name: foo}, 
    1: {name: bar}, 
    2: {name: hohoho}, 
    3: {name: heyheyhey} 
} 

:

{ 
    0: {name: foo}, 
    1: {name: bar}, 
    3: {name: heyheyhey} 
} 

누군가가 날 것 뭐죠 이해하는 데 도움 주실 래요 에? 일부 의견은 문제가 될 수 삭제 말했다 때문에

편집

, 난 내 저장소에서 삭제하고있어 방식 변경 :

var temp = {}; 
for (var x in store) { 
    if (x != id) { 
     temp[x] = store[x]; 
    } 
} 
store= temp; 

을하지만 난 여전히 같은 문제가 발생하고있다.

Answer 1

내가 내 의견에 언급 한 것처럼 질문에 대답하십시오. Delete은 핵심 단어처럼 메모리를 확보하지 않는다고 생각합니다. 시사 일반적인 어떤 신념, delete 연산자가 직접 메모리를 해제 함께 ​​할 수 없다 달리 MDN Delete

에 따르면

. 메모리 관리는 차단 참조를 통해 간접적으로 수행됩니다.

이전 작업을 수정하는 대신 새 개체로 교체하면됩니다.

편집 : 당신은 알고 있어야합니다 나는 당신이 실수로 두 번째 setState PARAM을 사용하는 생각이

cloneObject(obj) { 
     if (null == obj || "object" != typeof obj) return obj; 
     var copy = obj.constructor(); 
     for (var attr in obj) { 
      if (obj.hasOwnProperty(attr)) { 
       copy[attr] = obj[attr]; 
      } 
     } 
     return copy; 
} 

Answer 2

.. 같은

시도 뭔가 :

setState를()는 않습니다 즉시 this.state를 변경하지 않고 보류 중 상태 전이를 작성합니다. 이 메소드를 호출 한 후 this.state에 액세스하면 잠재적으로 기존 값을 리턴 할 수 있습니다.

및 setState 두번째 매개 변수는 콜백이다

또한이 setState를 완료하고 성분이 다시 렌더링 된 후에 실행되는 선택적인 콜백 함수를 제공 할 수있다.

setState(store, (newState) => console.log(newState); 

또는 그것의 짧은 버전 : 그렇지 않으면

setState(store, console.log) 

당신은 단지 현재의 클래스 상태를 기록하고 두 번째 PARAM으로 undefined를 반환 할 것 ( 그래서 콜백 같은 것을해야한다 콜백)

Answer 3

삭제 대신 undefined을 사용할 수 있습니다.

const changes = [ 
    { 
    title: 'add 2', 
    update: state => Object.assign({}, state, { 2: { name: 'hohoho' } }), 
    }, 
    { 
    title: 'remove 2', 
    update: state => Object.assign({}, state, { 2: undefined }), 
    }, 
    { 
    title: 'add 3', 
    update: state => Object.assign({}, state, { 3: { name: 'heyheyhey' } }), 
    }, 
]; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     0: { name: 'foo' }, 
     1: { name: 'bar' }, 
    }; 
    } 

    update(step) { 
    this.setState(changes[step].update); 
    } 

    componentDidMount() { 
    setTimeout(this.update.bind(this, 0), 2000); 
    setTimeout(this.update.bind(this, 1), 4000); 
    setTimeout(this.update.bind(this, 2), 6000); 
    } 

    render() { 
    return (
     <pre> 
     {JSON.stringify(this.state, null, 2)} 
     </pre> 
    ); 
    } 
} 

여기를보십시오 : 당신이 this.setState({ a: something })을 수행 할 때

https://jsfiddle.net/jprogd/062z1kqd/2/은 BTW 당신은 ​​실제로 (전용 a 속성이 업데이트 될 예정이 특정한 경우에) 특정 속성을 정확히 { a: something }에 전체 상태를 설정하지만 업데이트되지 않습니다.