이것은 실제로 상태를 돌연변이시키고 있습니까?

Question

저는 누군가를 보여주기 위해 React 기능의 기본적인 비트를 모아 놓았습니다. 그리고 콘솔 탭은 나를 직접적으로 변형시키는 것으로 비난하고 있습니다. 나는 당신이 this.setState()을 사용하는 한 기본적으로 괜찮다고 생각했습니다.

이 작은 코드는 상태에 저장된 person 개체의 첫 번째 사람을 뱉어 내고 단추를 클릭하면 나이가 증가합니다 (실제로는 모든 것이 부수적으로 작동 함).

사실 내가 이것을 직접하여 상태를 돌연변이합니까? 그리고 만약 내가 그렇다면 올바른 방법은 무엇입니까? setState로서

import React, { Component } from 'react'; 
import './App.css'; 
import Person from './Person/Person'; 

class App extends Component { 
    state = { 
    persons: [ 
     { name: 'Max', age: 28 }, 
     { name: 'Stephanie', age: 26 }, 
     { name: 'Manu', age: 29 }, 
    ], 
    } 

    increaseAgeHandler =() => { 
    this.setState({ 
     persons: [ 
     { name: 'Max', age: this.state.persons[0].age += 1 }, 
     { name: 'Stephanie', age: 26 }, 
     { name: 'Manu', age: 29 }, 
     ], 
    }); 
    } 

    render() { 
    return (
     <div className="App"> 
     <h1>This is an app</h1> 
     <button onClick={this.increaseAgeHandler}>Add to age</button> 
     <Person name={this.state.persons[0].name} age={this.state.persons[0].age} /> 
     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

은 아래와 setState 콜백 함수 인수로 prevState을 통과하는 것이 바람직 하나 연령 증가 비동기이다.

increaseAgeHandler =() => { 

    this.setState(prevState => { 
     persons: [ 
     { name: 'Max', age: prevState.persons[0].age + 1 }, 
     { name: 'Stephanie', age: 26 }, 
     { name: 'Manu', age: 29 }, 
     ], 
    }); 

    } 

Answer 2

그렇게 :

this.state.persons[0].age += 1 

는 연령 변수에 대한 새 포인터를 만들 acutally 돌연변이 당신이 아래와 같이 이전 상태로 1을 추가하는 경우 또한 국가의 어떤 돌연변이가 없다 그래서 당신이 실제로 할 겁니다 : 당신이 이것에 대해 질문이있는 경우

this.state.persons[0].age + 1 

이 이전 값을 돌연변이 당신의 국가에 새 포인터를 추가하지 않습니다, 단지 쏴! 그것이 이해할 수 있기를 바랍니다. +=은 할당 연산자 때문 직접 age 변경

Answer 3

this.state.persons[0].age += 1 

. 대신에, 단지 지정하지 않고 나이에 1을 추가 : setState를()를 호출 할 때

this.state.persons[0].age + 1 

Answer 4

가, 반작용은 현재 상태가 생성자 만 assinable의

constructor(props) { 
    super(props); 
    this.state = { 
     persons: [ 
     { name: 'Max', age: 28 }, 
     { name: 'Stephanie', age: 26 }, 
     { name: 'Manu', age: 29 }, 
     ] 
    }; 
    } 

this.state으로 귀하가 제공하는 객체를 병합, 별도의 setState() 호출로 개별적으로 업데이트 할 수 있습니다. lifecycle 반응에 대해

increaseAgeHandler =() => { 
    this.setState({ 
     persons: [ 
     { name: 'Max', age: this.state.persons[0].age += 1 }, 
     { name: 'Stephanie', age: 26 }, 
     { name: 'Manu', age: 29 }, 
     ], 
    }); 
    } 

상세 정보 :

대신

this.state.persons[0].age += 1 

를 사용 setState를() : 는 직접

예를 들어,이 구성 요소를 다시 렌더링되지 않습니다 국가를 개조하지 마십시오