setState関数と複雑なオブジェクトに反応する

Question

私はsetStateの周りを頭で囲んでいます。私は、メソッドが非同期であり、上書きされた状態の変更を防ぐので、setStateに関数を渡すことをお勧めします。したがって、ほとんどの場合、これは動作します。

this.setState(() => ({title})) 

複雑なオブジェクトがある場合はどうなりますか。 私の状態は次のようである：

{ 
movie: { name : 'one', length: 35}, 
showLength: false 
} 

私はので、私は

this.setState((prevState) => ({showLength : !prevState.showLength})) 

しかし、私の場合は容易である偽/ trueにブール値を変更したいボタンのクリックに基づいて長さを表示させたいです映画の名前を編集したいですか？私はそれをsetStateに渡す前に状態全体をクローンする必要がありますか、より簡単な方法です。私は、これが原因で動作します（ただし、私の意図を示して）いません意味：

this.setState((prevState) => ({movie.title:'new title'})) 

Answer 1

あなたが正しいなら、あなたはmovieの内容をコピーして、あなたがしたいフィールドを更新する必要があります。

これは動作するはずです：

this.setState((prevState) => ({...prevState.movie, title:'new title'})) 

Answer 2

setStateは、複数の方法を使用することができます。オブジェクトを渡すことができます。または、prevStateをパラメータとして持つ関数を渡すことができます。

だからこれ、これを行うよう

this.setState(() => ({title})) 

実際に同じ、

this.setState((prevState) => { 
    return { title: title }; 
}); 

ので、この方法は、あなたはあなたの状態に複雑な変更を加えて、新しい値を返すことができます。重複して申し訳ありません

例

this.setState((prevState) => { 
    const newState = Object.assign({}, prevState); 
    newState.movie.title = 'some new title'; 
    newState.showLength = !prevState.showLength; 
    return newState; 
});