問題タブ [setstate]

ここでの反応の例に似たフィルター処理されたテーブルを作成しようとしています: Thinking in React。追加したいのは、アイテムの合計セットから表示されているアイテムの数です。私のアイデアは、状態変数「numShowing」を最上位コンポーネント「リソース」に保持することでした。また、setState() を使用して「numShowing」をインクリメントする関数をこのコンポーネントに作成しました。次に、その関数をコンポーネントのチェーンに渡し、対象のコンポーネントがマウントされたときに呼び出します。ここにいくつかの疑似コードがあります (不要なものとフィルタリングコンポーネントへの参照を削除しました):

コンポーネントの階層は、Resources -> ResourcesTable -> ResourcesTableEntry です。

ResourcesTable.createEntry 関数からのインクリメントも試みました。どちらの場合も、numShowing は 1 に設定されるだけです。これは、setState が非同期または非アトミックであるためだと思われます。そのため、incrementShowing() へのすべての呼び出しが行われる時点で numShowing の現在の状態は 0 です (コンソール出力は関数を検証します)。正しい回数呼び出されています)。では、これを行う「正しい」方法は何でしょうか?

配列をクリアしようとしていますが、問題があります。 this.setState({warnErrorTypes:[]})

競合状態に対処しているのか、特定の問題が何であるかはわかりませんが、値を [] にリセットする必要がある場合、配列の値が一貫して間違っていることがわかります。

[1,2] を含む配列を [] に置き換え、続いて [3] に置き換える方法は次のとおりです。

1. this.state.warnErrorTypes は [] で始まる配列です
2. 条件に基づいて、配列に 2 がプッシュされます
3. 条件に基づいて、配列に 1 がプッシュされます。
4. 条件に基づいて、3 は配列にプッシュされません
5. 一時停止。ユーザーが UI を操作する
6. アレイはブランクです:this.setState({warnErrorTypes:[]})
7. 条件に基づいて、2 は配列にプッシュされません
8. 条件に基づいて、1 は配列にプッシュされません
9. 条件に基づいて、3 が Array にプッシュされます。

上記のロジックの結果は、常に[2,1,3]であると予想されます[3]。

問題：

それは奇妙です。子コンポーネントの入力ボックスに入力すると、「onChange」メソッドが更新を親コンポーネントに送信するはずです。最初に入力したものは更新に失敗しますが、次に入力したものはすべて更新されますが、現在の入力と同期していません。

私は Reactjs の初心者で、JavaScript の達人ではないので、何が起こっているのかわかりません。

例：

これは、「setState」が変更された後の状態と新しい状態を更新するためのオブジェクトのコンソール出力です。

初めて更新しようとしていvalue1ます:

2回目の更新試行value1：

ご覧のとおり、最初は何も更新されていません。その後、2回目は部分的に更新されました。

コード：

私はこのようなコンポーネント構造を持っています

ブロック E のコンポーネントに対するアクションは、コンポーネント A の関数によって処理されて A の状態になり、B と C に props として渡されます。そのより良い方法は、Flux、pubsub-js、またはその他のストアメッセージシステムを使用することでしたが、私の理解できる限り正しいソリューションが機能しない理由を誰かが説明できることを願っています.

コンポーネント A のこの関数をコンポーネント E の複数のインスタンスから同時に呼び出すと、(各関数呼び出しが変更を提供するのではなく) 状態の変更が 1 つだけの競合状態につながります。

ここでの関数の更新はから来ています

ReactJS の推奨プラクティスに反する悪いソリューションですが、うまく機能します。

私の質問は：

複数の同時 setState が競合状態を呼び出すのはバグですか、それとも理解せずに何か間違ったことをしていますか?

クラスを介して参照し、複数のコンポーネントの状態 (actiu) を false に設定しようとしています。行からラベルをクリックすると、行内のすべての要素のアクティブ状態が false になるようにするにはどうすればよいですか? これが私のコンポーネントツリーです:

ラベルの各行を生成する Blade テンプレート構文がいくつかあります

よろしくお願いします。

ここで何が間違っているのかわかりません。API 呼び出しを開始できるように、いくつかの値の状態を変更する関数をトリガーするイベントがあります。ただし、関数を初めて実行するときは、状態は変化しません。関数が 2 回目に実行されると、前回の実行からの状態変更が設定されます。この遅延の原因は何ですか?

以下に示すようhandleFilterChangeに、イベントから値を受け取ります。値が適切に受信されていることを確認できます。ただし、設定された直後に状態の値を確認すると、未定義であることがわかります。イベントが2回目に来るとき。ただし、元の状態の変更が発生したことがわかりますが、2 番目の状態の変更は発生していません。では、実際に状態を設定するために setState を 2 回呼び出す必要があるのはなぜでしょうか。