無効/回避策キー要求に反応しますか？

Question

私は警告を受けていますEach child in an array or iterator should have a unique "key" prop. Check the render method of Login

キーを使用せずに要素の配列を戻したいと思います。私は無意味なラッパーを追加せずに、このための回避策があると考えなければなりませんか？

注return [<div/>, <div/>];

render() { 
    return (
     <div className='login'> 
     {this.mobileWeb()} 
     {this.pcWeb()} 
     </div> 
    ); 
    } 

    mobileWeb() { 
    if (this.state.isMobileWeb === true) { 
     return [ 
     <div className='sky-container'></div>, 
     <div className='sea-container'></div> 
     ]; 
    } 
    } 

    pcWeb() { 
    if (this.state.isMobileWeb !== true) { 
     return [ 
     <div className='sky-container'></div>, 
     <div className='sea-container'> 
      <LoginForm onChange={this.onChange} ref='loginForm' onEmailChange={this.onEmailChange} onPasswordChange={this.onPasswordChange} /> 
      <input type='submit' value='Submit' onClick={this.login} /> 
     </div> 
     ]; 
    } 
    } 

Answer 1

キーなしで子要素を渡すべきではありません。Reactは、仮想DOM（軽量のjavascriptオブジェクトです）を使用してdiff diffにキーを使用します。レンダリング中に反応が異なるキー値を参照し、新しいDOMオブジェクトを作成するため、keyをDate.now（）またはMath.random（）として使用しないでください。

Answer 2

あなたは

key={Date.now()} 

のようなキーを提供しようとしたり、ランダムな数字を試すことができます。

これらのキーは、調整アルゴリズムにとって重要です。これらのキーは遅くなくても動作するはずです。

類似したquestionがありました。

---

IMOあなたが鍵を提供していない場合には、自動的にキーを設定する必要が反応するが、私はこれはpossibleで見つかっていません。