ときどきハマるので書いておきます。
inputタグやtextareaタグをReactで使うときはフルコントロールなコンポーネントにする
フォーム系のinputタグやtextareaタグに代表されるコンポーネントはUncontrolledなコンポーネントと呼ばれ、
入力内容がHTMLの入力欄自体で保持されています。
これの何が問題になるのかというと
- コンポーネントがUnmountされないと入力欄がクリアされない
- React RouterやStateの切り替えなどで同じ入力欄を持つコンポーネントを連続で表示する場合、Ummountされないため入力欄に前の入力状態が残ってしまう。
参考：You Probably Don't Need Derived State
意訳：getDerivedStateFromPropsは使う必要ないよ
回避策
２つあります。
onChangeで常に値を監視し、親コンポーネント側でstateに保存します。value属性にpropsで常に更新したstateを渡します。
例えば、Emailの入力欄のフルコントロールコンポーネントを次のように作成します。
function EmailInput(props) {
return <input onChange={props.onChange} value={props.email} />;
}
例：https://codesandbox.io/s/6v1znlxyxn
keyの属性にユニークキーをつけることで別物のinputタグとして判別される
この場合、valueを常に更新する必要はありません。ただし、ユニークなキーでなければなりません。
<input defaultValue={props.defaultEmail} key={this.props.user.id} />