問題タブ [react-final-form]

テキスト領域に defaultValue を設定できません。react-final-form を使用しており、react-final-formの Field 要素内に TextareaField をラップしています

これが私のコードです：

ひどく立ち往生しています。どこに行方不明ですか??

以下のように、react-final-form を使用して入力フィールドを検証しています。

私は次のようにそれをテストしました：

これは meta.touched のテストをカバーしていますが、カバレッジ レポートは、!meta.valid のテストをカバーしていないことを示しています。!meta.valid のテストをカバーする方法がわかりません。

しかし、これはそれをカバーしていません, 助けてください

私のアプリケーションは redux を使用して、メンバーの詳細を表示するためにアプリ内の複数のコンポーネント間で共有されるデータの MEMBER オブジェクトなど、redux ストア エンティティ リデューサー内のバックエンド API からのデータを保持しています。現在、フォームからデータを取得し、PUT リクエストとしてバックエンド API に送信するEditProfileコンポーネントを実装しています。リクエストが正常に終了した場合(ここまで完了) 、redux store の現在のメンバー プロファイル エンティティを更新します。このreduxストアの更新に到達するための「ベストプラクティス」のようなものを見つけようとしています. 基本的な API ミドルウェア (Redux の実世界のアプリケーションの例と同様) を実装しましたが、状態を更新してその部分に到達する方法が完全にはわかりません。

バックエンド API は、PUT 要求の後にステータス コードと理由 (エラーの場合) または memberId (成功の場合) のみを返します。バックエンド エンドポイントを変更して、新しいメンバー プロファイル オブジェクトを返すことができません。これは、Web サーバー以外に別の「グローバル」サーバーがあり、これと同じように動作し、変更できないためです。

したがって、フォーム (react-final-form) からのデータを永続化する必要があると思います。(バックエンドからの) memberId を含む応答が成功した場合は、このデータを使用して現在の Redux ストア エンティティ (メンバー プロファイル) を更新します。

更新要求データをストアエンティティリデューサーに保存することを考えていました-> UPDATING_MEMBER_PROFILE のようなキーと id 要求が成功して終了し、この 2 つのオブジェクトを 1 つにマージして UPDATING_ 部分をクリアします。何か提案はありますか？

アップデート：

コードで API を呼び出すには、次のようなアクションがあります。

memberAction.js

次に、API ミドルウェアが action.type === API を処理し、API_REQUEST、API_SUCCESS、および API_ERROR タイプのアクションを、最初の fetchProfile アクションからのエンティティとラベルで生成します。次のようになります。

apiMiddleware.js

ミドルウェアサーバーと別のアクションをディスパッチした後、APIレデューサーはAPIからデータを割り当てて、次のようなエンティティで保存します。

apiReducer.js

これらは、単純にするための疑似コードにすぎません (そして、今のところサンクは使用しません...)。したがって、このアプローチで必要なものに到達するには、一時データをストアに保存する場所 (おそらく API ミドルウェア内) が必要です (おそらく別のアクションによって)。

ボタン1またはボタン2のクリックに応じてオン/オフが切り替わるフォームにboolプロパティを追加しようとしています。

ローカルセットアップでこのコードサンドボックスを実行すると、react setState エラーが発生しますが、最初のクリックでのみ発生します。

Warning: Can't call setState on a component that is not yet mounted.

input.onChange の呼び出しが想定されていないためだと思います。カスタム入力を実現する最良の方法は何ですか?

ユーザーがテキストフィールドにテキストを入力するとすぐに、ミューテーターを実装してテキストを大文字に変換するさまざまな方法を試しました。しかし、まだ成功していません。エリックが提供した例は正しいようですが、何かが足りないかもしれません。

値が定義されていないためtoUpperCase、値を呼び出すとエラーがスローされます。valueどんな助けにも本当に感謝します！

更新: 2018 年 10 月 27 日

この問題を解決するために、パーサーも使用できることに気付きました。

ミューテーターがどのように機能するか、および私のコードのエラーは何かをまだ探しています。

試行済み: 既存のフィールドに基づいて状態を変更する

外部ユーザー アクションからフィールド値を設定/変更する方法

フォームの反応でセマンティックUIを使用しています。

disable for を使用するとInput、ラベルと入力フィールドの両方が無効になります。

以下のように使用しました

ラベルではなく入力ボックスのみを無効にする方法はありますか??

前もって感謝します ：）