リアクションセット状態が古い状態を取り除く

Question

私は問題に遭遇して、助けを求めています。 私はmapRanksという機能を持っています。 componentWillMountで呼び出され、基本的にsetStateの要素はmapの文字列を使用しています。 1つの配列でうまく動作しますが、複数の異なる配列で複数回実行する必要があります。

前の状態はすべて最後のものを除いてarray[0]になります。

それを見てみてください：私の状態は、このようになります

export const mapRanks = (options, ranks, count, element) => { 
    component = options.component; // this component 
    group = options.group;   // can be 'mapFirst', 'mapSecond', ... 
    let col = count; 
    let j = count; 
    let k = count; 

    const map = ranks.map((rank, i) => { 
    if (i === col) { 
     col = col + j--; 
     if (j === 0) { 
     j = k--; 
     } 
     return [element(i, group, rank), <div key={ i } className="clearfix"></div>]; 
    } 
    return [element(i, group, rank)]; 
    }); 

    const newState = update(component.state, { maps: { [group]: { $set: map } } }); 
    component.setState(newState); 

    setTimeout(() => { console.log(component.state.maps); }, 7000); 
}; 

：また

constructor() { 
    super(); 
    this.state = { 
     maps: { 
     mapFirst: [], 
     mapSecond: [], 
     mapThird: [], 
     mapFourth: [], 
     }, 
    }; 
    } 

、私はそれが関係ないと思うが、私は思ったんだけど...あなたを行います上記のsetTimeout〜console.logを参照してください。状態がarray[0]を返すのでsetTimeoutを使用しなければならなかったが、setTimeoutを使用すると、要素の配列全体が返されます。何故ですか？

EDIT：問題が見つかりました。

componentWillMount() { 
    mapRanks(
     { component: this, state: 'mapFirst' }, ranksFirst, 9, element 
    ); 
    mapRanks(
     { component: this, state: 'mapSecond' }, ranksSecond, 8, element 
    ); 
    } 

私は二mapRanks、mapFirst[0]とmapSecond[165]を持って返すの両方（2）console.logを追加 ..私はまだ理由を理解していません。

第二編集：私は、私は二mapRanks関数呼び出しのためのsetTimeoutを追加して、今それが動作

それを修正しますが...。私はより良い解決策が必要です。助けてください。

Answer 1

setStateの呼び出しの同期動作が保証されておらず、パフォーマンスの向上のために呼び出しをバッチ処理することができます。あなたのコードがブロックしないよう

のではなく、状態を更新DOMを差分の、変更にあなたがsetStateを呼び出すたびにレンダリング、REACTは、試してみて、バッチの呼び出しを一緒にし、次の再描画の前にそれらを実行するために起こっていますUI。

これは、setState can be asynchronousを意味するので、状態にアクセスする前に状態が変更されるのを待つ場合は、コールバック関数を渡す必要があります。

component.setState(newState,() => { 
    console.log(component.state.maps); 
});