反応ネイティブの状態オブジェクトを更新/変更する最も良い方法は？

Question

Stateオブジェクト内のネストされたプロパティを更新する最適な方法は何ですか？

// constructor -- 
this.state.someprop = [{quadrangle: {rectangle: {width: * }}, ...}] 
... 

矩形オブジェクトの幅を更新したいとします。

this.state.quadrangle.rectangle.width = newvalue // isn't working 

私はそれは次のように動作させることができます：

const {quadrangle} = this.state 
quadrangle.rectangle.width = newvalue 
this.setState = { 
    quadrangle: quadrangle 
} 

しかし、パフォーマンス/メモリ

Answer 1

最良の方法のための最善の方法を鳴らないこの方法、およびFacebookのは、提案した方法は、 this.setState({someProp: "your new prop"})を使用します。

これを使用すると、コンポーネントが正しくレンダリングされることが保証されます。

この関数はインクリメンタルなので、状態全体を設定する必要はなく、必要な小道具だけを設定する必要があります。

ドキュメントhereを読むことを強くお勧めします。

Answer 2

// ES6 WAYS TO UPDATE STATE 
// NOTE: you MUST use this.setState() function for updates your state 
class Example extends Component { 

constructor(props) { 
super(props); 
this.state = { 
    name: 'John', 
    details: { 
    age: 28, 
    height: 1.79, 
    } 
} 

componentDidMount() { 
this.handleChangeName('Snow'); 
this.handleAgeChange(30); 
} 

componentDidUpdate() { 
console.log(this.state); 
/* 
returns 
{ 
    name: 'Snow', 
    details: { 
    age: 30, 
    height: 1.79, 
    } 
} 
*/ 
} 

// this way you keep immutable your previous state (best practice) with de 
// param "prevState" 
handleChangeName = (_name) => { 
this.setState(
    (prevState) => ({ 
    name: _name 
    }) 
) 
} 

//this is how you update just one property from an internal object 
handleAgeChange = (_age) => { 
this.setState(
    (prevState) => ({ 
    details: Object.assign({}, prevState.details, { 
    age: _age 
    }) 
    }) 
) 
} 

// this is the simple way to set state 
handleSimpleAgeChange = (_age) => { 
    this.setState({ 
    details: Object.assign({}, this.state.details, { age: _age }) 
    }) 
} 

render() { 
return (
    <h1>My name is {this.state.name} and i'm {this.state.details.age} years old</h1> 
) 
} 

} 

あなたはそれが難しくせずにベストプラクティスを維持したい場合は、あなたが行うことができます：

updateState = (obj) => { 
if (obj instance of Object) { 
    this.setState(
    (prevState) => (Object.assign({}, prevState, obj)) 
); 
} 
} 

用法：

//code ... code ... code ... 

handleAgeChange = (_age) => { 
this.updateState({ 
    details: Object.assign({}, this.state.details, { age: _age } 
}) 
}