警告：flattenChildren（...）：同じキーを持つ2人の子供が発生しました/子キーは一意でなければなりません

Question

昨日私のプロジェクトにreact-router-domを追加しました。空と私が得る

警告：flattenChildren（...）：同じキーを持つ2人の子供、element-id-50が発生しました。子キーは一意でなければなりません。 2人の子供がキーを共有する場合、最初の子供だけが使用されます。

（上記の使用数50は一例であり、それは別のIDを持つすべて〜40時間ごとに、このエラーがスローされます）

問題はここに私のsky.jsファイルに由来するようだ：

componentWillMount() { 
    this.props.dispatch(requestSkySetup()); 
    this.props.dispatch(requestAllElements()); 

    this.setState({loadedSky: true, loadedElements: true}); 
} 

別の画面に移動するたびに、このコンポーネントはアンマウントしてから再びマウントします。 receiveSkySetupが終了すると

は、sky.jsでrender関数がSector Sと呼ばれるdiv要素の束を作成し、各SectorはSlot Sと呼ばれるいくつかのdivを作成します。

は、その後、私は持っているSlot.renderの内側：

return connectDropTarget(
      <div className={showOutline ? 'slot showOutline' : 'slot'} style={style} onClick={interactable ? this.handleClick : null}> 
       { 
        elements 
         .map(e => (
          <SkyElement 
           id={e.id} 
           key={`element-id-${e.id}`} 
           title={e.title} 
           size={150} 
           opacity={e.opacity} 
           glow={e.glow} 
           color={e.color} 
           sectorId={e.sectorId} 
           slotId={e.id} 
           dispatch={this.props.dispatch} 
           isDragging={false} 
           transformElement={false} /> 
         )) 
       } 
      </div> 
     ); 

上記SkyElementコールでkey要素は、各取り付けに40個の以上のエラーを投げているものです。

必要に応じてより多くのコードを提供してください。

ご協力いただければ助かります。ありがとう！

編集：もう少し、アイテムが私の店に倍増さに掘りコンソールロギング要素

。

したがって、2日skyタブのレンダリング、要素IDの完全なリストは、レンダリング3日["0", "1", "2", "3", "4", "5", "6", "7", "17", "18", "19", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "77", "78", "0", "1", "2", "3", "4", "5", "6", "7", "17", "18", "19", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "77", "78"]

あり、要素0から78（上記アレイから適用IDS）を再び添加します

const mapStateToProps = ({elements}, ownProps) => { 
    return { 
     elements: getElementsBySlotId(elements, ownProps.id), 
    }; 
}; 

elementsSlot.jsで配列

にここSkyが行っている負荷のn倍の数になります。 sky.js

const mapStateToProps = ({sky, elements}) => { 
    return { 
     sectors: getSky(sky).sectors, 
     elements: getElementsByKeyName(elements, 'visibleElements'), 
     unplacedElements: getElementsByKeyName(elements, 'unplacedElements'), 
    }; 
}; 

印刷elements.lengthで

私は彼らがあまりにもここに倍増することを参照してください。スロット。それは私のelements/reducer.js

case 'receiveAllElements': 
     const visibleElements = {}; 
     const unplacedElements = {}; 

     const elements = action.elements.reduce((result, index) => { 
      result[`${index.id}`] = index; 
      return result; 
     }, {}); 

     const keys = Object.keys(elements); 
     for (const key of keys) { 
      const e = elements[key]; 

      if (e.sectorId === null) { 
       unplacedElements[key] = e; 
      } else { 
       visibleElements[key] = e; 
      } 
     } 

     const visibleIds = Object.keys(visibleElements); 
     const unplacedIds = Object.keys(unplacedElements); 
     console.log(visibleIds); 
     console.log(unplacedIds); // logging these, the numbers are consistent and don't double, triple etc with each load 

     return { 
      ...state, 
      elementsMap: { 
       ...state.elementsMap, 
       ...elements, 
      }, 
      visibleElements: [...state.visibleElements, ...visibleIds], 
      unplacedElements: [...state.unplacedElements, ...unplacedIds], 
     }; 

たぶん何かのセンス

がそこにカウントが倍増する原因になっている可能のでjsが、同じ店から引っ張っていますか？

Answer 1

問題ここでは、

return { 
     ...state, 
     elementsMap: { 
      ...state.elementsMap, 
      ...elements, 
     }, 
     visibleElements: [...state.visibleElements, ...visibleIds], 
     unplacedElements: [...state.unplacedElements, ...unplacedIds], 
    }; 

すなわち、visibleElements（およびunplacedElements値）でした。このコードは、私が戻ってSkyタブに行ってきましたたびにヒットされていたことから、それは値