これは実際に状態を突然変異させていますか？

Question

私は本当にリアクション機能の基本的なビットをまとめて誰かを見せてくれました。私のコンソールタブは私に状態を直接変えていると非難しています。 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を渡すことをお勧めし1で年齢を増加させる非同期です。

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 

この前の値を変異し、あなたの状態に新しいポインタを追加していない、ただ撃ちます！それが理解できることを願っています。

Answer 3

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

+=が代入演算子であるので、これは直接ageを変化させます。代わりに、単に割り当てず、年齢に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（）： は直接

は、例えば、これは、コンポーネントを再レンダリングしません状態に変更しないでください