14

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

<A>
    <B>
        <C/>
        <C/>
    </B>
    <D>
       <E/>
       <E/>
    </D>
</A>

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

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

updateState(value,index){
   this.setState(update(this.state, {
        a: {
          [index]: {
            b: {
             $set: value
            }
          }
        }
    })
);
}

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

import update from 'react/lib/update';

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

updateState(value,index){
   this.state.a[index].b=value;
   this.forceUpdate();
);
}

私の質問は：

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

4

2 に答える 2

7

Reactのドキュメントによると、最初の回答で述べたように、関数を渡して原子性の操作を保証できます。問題は、状態を変更するのではなく、渡された関数内で新しい値を返すことです。

setState(function(previousState, currentProps) {
  return {myInteger: previousState.myInteger + 1};
});

https://facebook.github.io/react/docs/component-api.html

于 2016-07-27T21:56:24.870 に答える