初期コンポーネント状態としてReduxを使用

Question

現在選択されているアイテムの名前を編集するコンポーネント（「name」および「selected」のプロパティを含む）の初期状態としてReduxを使用しています。これはローカルの最初の州として使用されています。なぜなら、私がまだ実装されていない保存ボタンをクリックしたときだけReduxグローバル状態を更新したいからです。

constructor(props) { 
    super(props) 
    this.state = { 
     item: this.props.item 
    } 
} 

My機能は、編集名の入力が含まれているレンダリング：

<TextField 
    id={"name"} 
    value={this.state.item.name} 
    onChange={e => this.updateName(e.target.value)} 
/> 

updateName（）関数は次のとおりです。

ここ

updateName = (value) => { 
    var newItem = this.state.item 
    newItem.name = value 
    this.setState({item: newItem}) 
} 

、私はアイテムのデフォルトの値を選択することができます選択したアイテムの名前に従って入力が変更されます（アイテムを選択すると、Reduxの状態が更新され、コンポーネントの状態と入力のテキストも更新されます）。すべてが意図的に働いています。

入力に書き込むと書き込まれたテキストは変更されますが、項目を選択すると入力のテキストは更新されません（テキストを入力する前と同じようにReduxの選択項目の名前に従う必要があります）。

this.props.itemへの参照（およびその後のReduxの更新）は、コンポーネントの状態をthis.setState（）で更新するとすぐに失われますか？しかし、どうすればこの問題を修正できますか？

Answer 1

constructorは、あなたの入力が制御されたコンポーネントで、あなたの状態によって命令されている間、一度だけ呼び出されることに注意してください。

componentWillReceivePropsメソッドでは、これを還元状態に基づいてコンポーネントの状態を更新する必要があります。

注意：小道具を使用して状態を更新することは、アンチパターンとみなされます。