セットアップ
私のプロジェクトでは多くのライブラリを使用していますが、この場合、 redux-form、material-ui、およびparseが関連していると思います。
私のアプリには、次のようなフォーム コンポーネントがあります。
class ObjectForm {
render() {
const { fields: { field }, handleSubmit, submitting } = this.props;
return (
<form onSubmit={handleSubmit}>
<TextField hintText="Hint Text" {...field} />
<RaisedButton label="Send" type="submit" disabled={submitting} />
</form>
);
}
}
次のようなコンテナでラップされます。
function mapStateToProps(state) {
const { object } = state;
return {
object,
initialValues: {
field: object.get('field'),
},
onSubmit: data => {
return object.save({
field: data.field,
});
},
};
}
export default reduxForm({
form: 'objectForm',
fields: [
'field',
],
}, mapStateToProps)(ObjectForm);
問題
問題は、フォームが汚れている場合 (入力の値を変更した場合)、次のエラーが発生することです。
Uncaught Invariant Violation: traverseParentPath(...): Cannot traverse from and to the same ID, ``.
それに加えて、解析オブジェクトは実際に保存されますが、保存が終了するまでボタンは無効になりません。
値を変更せずにフォームを再度送信すると、すべて正常に機能します。
何が原因である可能性がありますか
これまでのところ、削除するとエラーが解消される 3 つのコードを見つけることができました。
最初のものは送信ボタンのdisabledプロパティです。パーツを削除disabled={submitting}すると、エラーは解消されますが、視覚的なフィードバックが見逃されます。更新:disabled属性を削除しても、submittingプロパティを使用して条件付きで読み込みインジケーターを表示すると、エラーはスローされませんが、インジケーターも表示されません (ただし、フォームがクリーンな場合は表示されます)。
initialValues2 つ目は、 prop を reduxFormに送信しないことです。削除initialValues: {...}すると、エラーも解消されます。
最後になりましたが、解析オブジェクト プロパティに新しい値を設定しないと、エラーが解消されます。object.save呼び出しからパラメーターを削除するだけで、すべて正常に機能します。
ヘルプ！
このため、私は何日も苦労しています。アイデアがありません。
コール スタック
